How to bind every time edited by user in TimePicker?

[Silvio]

Hi,

I've used ejs-timepicker control using a syntax similar to this:

 <ejs-timepicker ref="timePicker" floatLabelType="Auto" placeholder="Tempo realizzazione TOTALE (ore:minuti:secondi)" :step="timeStep" :format="timeFormat" v-model:value="timeVal"></ejs-timepicker>

having these bindings in the data section:

                timeStep: 1,

                timeFormat: 'H:mm:ss',

                timeVal: new Date(),

If I change the time using the list of values provided by the control on the right side, everything works fine, but, instead, if I change the value manually typing in the input area and I don't write times that are included in the proposed list on the right, the variable "timeVal" is set to null instead of the value supplied by the user.

How can I fix this beahviour and have the binded value correctly set even when the user types his own time?

Thank you.

Silvio

[Ponmani Murugaiyan]

Hi Silvio,  

Greetings from Syncfusion support.  

We have validated your reported issue and prepared sample based on your provided code snippet. We would like to inform you that, when the user input is invalid time value, then the model value will be set to null respectively with highlighted error class to indicates the time is invalid. In this case alone, the args.value will be null and this is the behavior of the component. 

As per your requirement in order to get the user input value even if the date is invalid. We suggest you to get the time value from the element in change or blur event as like below code snippet.  

<ejs-timepicker ref="timePicker" floatLabelType="Auto" placeholder="Tempo realizzazione TOTALE (ore:minuti:secondi)" :step="timeStep" :format="timeFormat" v-model:value="timeVal" :change ='onChange'></ejs-timepicker> 

... 

  export default { 

    data: function() { 

       return {  

         timeStep: 1, 

          timeFormat: 'H:mm:ss', 

          timeVal: new Date(), 

      }; 

    }, 

     methods: { 

      onChange: function(args) { 

      if(!args.value) { 

        var userInput = this.$refs.timePicker.ej2Instances.element.value; 

        console.log("UserInput : " + userInput) 

      } 

      console.log("timeval : " + this.timeVal); 

    } 

  } 

} 

Please find the test sample and video demonstration below for your reference. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Timepicker_null480174651  

 

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScreenCapture_31-08-2020_12.45.31_PM.mp4857232415  

 

Kindly check with the above sample. Please get back us of you need further assistance. 

 

Regards, 

Ponmani M