Timepicker's default selected value is not reflecting to binded model property.

[irsali]

Timepicker's default selected value is not reflecting to binded model property. However once changed it is reflecting that change in model property.

suppose default choosen time like 12:00 AM and user want to select the same time value. User will let the selection as it is. But it will not reach to the model.

consider the simple control and trace value of model property. <input ej-time-picker="e-value.two-way:field.value & validate;" />

I am posting two images to view the difference

Also, i could not found option for placeholder, time can be not requierd field. Is there something, i missed to do so?

[karthickthangasamy]

@irsali Please find the details as below.

Query : Timepicker's default selected value is not reflecting to binded model property.

When checked with the provided code example and screenshots we suspect that the field value does not same as in the timepicker model value in your application. So, we suggest to define the field value is same as in the model value of the component to achieve your requirement as like in the below code example. At the same time while changing the value in the TimePicker component then the value reflects in the model automatically.

 <template> 
        <h2>Syncfusion ejTimePicker</h2> 
        <input ej-time-picker="e-value.two-way:field.value" /> 
    </template> 

export class Sample { 
      constructor() {  
        this.field = {value: "12:00 AM"}; 
    }  
} 

For your convenience, we have prepared the sample based on your requirement.
Sample

Also, if you give the value as undefined then the timepicker displays the value as 12:00 AM in the input box instead of empty textbox value.

Query: Placeholder option

Currently, EJ TimePicker didn’t have PlaceHolder property support. But we can make use of placeholder attribute in the input element of EJTimePicker to achieve your requirement.

[timepicker.html]

<template>  
  <require from="./Common.css"></require>  
  <div class="row">  
     <div class="frame"><div>     
        <label>Select Time</label>   
        <input id="timepick" ej-time-picker="e-value.two-way:timeValue;e-width.bind:'100%'" placeholder="Select Time"></input>  
     </div>  
   </div>  
</div>  
</template>  

[timepicker.js]

export class Default {  
    constructor() {  
      this.timeValue = '2:00 AM';  
    }  
}  

[adriatic]

@karthickthangasamy - we (folks from Aurelia-UI-Toolkits team) are continuously impressed by your attention to customer need and quality of your response. Please keep up that great work 😄 .

[irsali]

@karthickthangasamy - Thank you for your efforts, Here i want to rephrase my concern, with help of your lines.

Also, if you give the value as undefined then the timepicker displays the value as 12:00 AM in the input box instead of empty textbox value.

When i give value undefined then timepicker displays selected value as 12:00 AM that is wrong. When user want to set the time 12:00 AM, he will left it as it is and we will not get this data on field.value.

Also, i have tried placeholder="Select Time". It is of no use here.

[karthickthangasamy]

@irsali Please find the details for your queries.

Query : When i give value undefined then timepicker displays selected value as 12:00 AM that is wrong.

We consider this as bug and fix it in our upcoming release, if you need, we will provide the patch for your convenience at the earliest.

Query: When user want to set the time 12:00 AM, he will left it as it is and we will not get this data on field.value.

To resolve this, as for now we can bind the 12.00 AM or any default value to fields.value bindable property as a work around.

[html]

<template>             
       <h2>Syncfusion   ejTimePicker</h2>
             <input ej-time-picker="e-value.two-way:field.value" />
</template>

export class ejButton {  
      constructor() {   
        this.field = {value: "12:00 AM"};  
    }   
}  

Query: I have tried placeholder="Select Time". It is of no use here.

The placeholder for the TimePicker component is working fine in our side, while giving empty value.

export class ejButton {  
      constructor() {   
        this.field = {value: ""};  
    }   
}  

[irsali]

@karthickthangasamy Thank you very much for your response. I am hoping to use this control feature in near future. No hurry. Thanks again.

[karthickthangasamy]

@irsali Thanks for your patience.

While analyzing more on reported query, providing the undefined value in JSON result will be considered as absence in the JSON fields. So the value API cannot be handled in source. So in this case, the min Time 12.00 AM will be set to input control as default behavior (if value not provide). So if you want to empty the TimePicker input please assign null value to TimePicker. To know more about this JSON behavior please refer the below discussion.

json-undefined-value-type

Please let me know if you have any concerns.

Thanks.