Sai Dharmendra
Top achievements
Rank 1
Rank 1
Sai Dharmendra
asked on 09 Feb 2018, 05:24 PM
<kendo-timepicker formControlName='StartTime' [min]='pharmacyStartTime' [max]='pharmacyEndTime' required></kendo-timepicker>
Intial values:
PharmacyStartTime = 9:00 AM
PharmacyEndTime =1:00PM
In our application, we update the above start and end times with the user input. But the min and max values of time picker component don't update.
Appreciate any help.
3 Answers, 1 is accepted
0
Hi,
I've prepared a simple test demo where the min/max properties are updated dynamically. My initial observation shows that the time range is updated accordingly.
https://plnkr.co/edit/HfAmDDYRVgYYpHxQx5dO?p=preview
Could you modify the demo in order to demonstrate the issue? This will help us to observe the erroneous behavior locally and find a resolution faster.
Regards,
Georgi Krustev
Progress Telerik
I've prepared a simple test demo where the min/max properties are updated dynamically. My initial observation shows that the time range is updated accordingly.
https://plnkr.co/edit/HfAmDDYRVgYYpHxQx5dO?p=preview
Could you modify the demo in order to demonstrate the issue? This will help us to observe the erroneous behavior locally and find a resolution faster.
Regards,
Georgi Krustev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.
0
Sai Dharmendra
Top achievements
Rank 1
Rank 1
answered on 14 Feb 2018, 05:27 PM
Hi,
I've created a plunk which describes the exact problem I am facing. can you please take a look at it.
https://plnkr.co/edit/5AWOUpTyiRrE5QBYhTnb?p=preview
Thanks,
Sai Dharmendra Kanneganti
0
Accepted
Hi,
Thanks for the repro demo. Indeed, the form will register range error when a new form control date is set. This is due to the Angular async nature of the templates. Basically, the `this.max = new Date(...)` call will be executed asynchronous, and `control.setValue(new Date(...))` will be called synchronous. Only the latter call, however, will initiate value validation. In that moment, the range is still not updated and the form will report the invalid range. The second click will remove the error, because the min/max range is already updated.
The solution is either to set the value asynchronously or to use custom range validation applied directly to the `birthDate` FormControl. For the first approach, check the updated plunkr demo:
https://plnkr.co/edit/UTERv4t9bkGZ5KFaq8wd?p=preview
For the second, please review the Angular Validation documentation:
https://angular.io/guide/form-validation
Regards,
Georgi Krustev
Progress Telerik
Thanks for the repro demo. Indeed, the form will register range error when a new form control date is set. This is due to the Angular async nature of the templates. Basically, the `this.max = new Date(...)` call will be executed asynchronous, and `control.setValue(new Date(...))` will be called synchronous. Only the latter call, however, will initiate value validation. In that moment, the range is still not updated and the form will report the invalid range. The second click will remove the error, because the min/max range is already updated.
The solution is either to set the value asynchronously or to use custom range validation applied directly to the `birthDate` FormControl. For the first approach, check the updated plunkr demo:
https://plnkr.co/edit/UTERv4t9bkGZ5KFaq8wd?p=preview
For the second, please review the Angular Validation documentation:
https://angular.io/guide/form-validation
Regards,
Georgi Krustev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.