Changing the value in an already created item

Question

I had a problem changing the value. In one method when a form is created, I create a DateTimePicker. Also in the form there are buttons like time templates, when clicked, the template time should be set by template . When pressed, the value changes visually, but after submitting the form, the value is set to the original :(.

var editorTemplateVue = Vue.component('editorTemplate', {
  template: `

  <span class="button is-success is-selected" v-on:click="changeDate('1')">8:00 - 16:00</span>
      <input id="StartTime" ref="starttime" class="e-field" type="text" name="StartTime" />

`,
  data: function() {
    return {
    };
  },

   methods: {
    changeDate: function (data) {
      let startDate = this.$refs.starttime.value;
      startDate = startDate.split(" ");
      this.$refs.startDate.value = endDate[0] + ' 16:00 ' + 'PM';

     },

      }
    },
}


    export default Vue.extend({
        data: function () {
            return {

                      editorTemplate: function(e) {
        return {
          template: editorTemplateVue
        }
}},
   methods: {
                onPopupOpen: function(args) {
      if (args.type === 'Editor') {
        let startElement = args.element.querySelector('#StartTime');

        if (!startElement.classList.contains('e-datetimepicker')) {

      let testtt =   new DateTimePicker(
            {value: new Date(startElement.value) || new Date(),
            },
            startElement
          );
        }
}

    });

Karthigeyan Krishnamurthi · Answer

Hi Vadims,  
 
Greetings from Syncfusion. 
 
We suspect that instance is not correct which could be the cause and kindly use the below code example. 
http://www.syncfusion.com/downloads/support/forum/144446/ze/Sample-1346137493  
 




changeDate: function(data) { 
      let startDate = this.$refs.starttime.value; 
      startDate = startDate.split(" "); 
      this.$refs.starttime.ej2_instances[0].value = new Date( 
        new Date(startDate[0]).setHours(8) 
      ); 
      this.$refs.endTime.ej2_instances[0].value = new Date( 
        new Date(startDate[0]).setHours(16) 
      ); 
    } 
  } 
 
Regards,  
Karthi

Vadims Talapins · Answer

Hi Karthi,Thanks a lot everything works as it should.Syncfusion best!

Karthigeyan Krishnamurthi · Answer

Most welcome 😊