Hello
I know that a DateTimePicker does not exist (yet). I'm trying to create the same experience using a DatePicker and TimePicker. However, the effect is not working as intended.
Please see: https://plnkr.co/edit/o4UnJzoPlMgKJGigiZEN?p=preview
If you click "Add new", input some data and change both the date and time and click "Add". You will see that either the date OR time will be set correctly (depending on which one you changed last), but not both.
The same thing happens when updating a row.
Can someone please help me fix this?
2 Answers, 1 is accepted
0
Accepted
Hello Casper,
Indeed, currently the recommended approach to achieve a DateTimePicker experience is to bind a DatePicker and a TimePicker to the same value. This approach typically works as expected, but does not work as expected when the components are bound to a reactive form control due to issues that are also logged to the Angular repo:
https://github.com/angular/angular/issues/14451
https://github.com/angular/angular/issues/13792
What happens is when the value of the DatePicker is changed, the value of the form control changes, but this in turn does not change the value of the TimePicker. Its date-part of the value still remains the initial form control's date value, thus when the time portion is changed through the TimePicker, the date portion also is reverted to the previous one.
There are three possible approaches to achieve the desired functionality:
1) Use template forms instead of reactive forms (as [(ngModel)] binding works as expected)
2) Use the DatePicker and TimePicker [(value)] bindings to ensure two-way binding to the model:
https://plnkr.co/edit/WbL1Cn6pE1yTeAzF5EBp?p=preview (maybe the most straight-forward approach)
3) Create a custom form control component that internally has a DatePicker and a TimePicker bound to the same value and use this single component in the Grid EditTemplate
I hope this helps.
Regards,
Dimiter Topalov
Progress Telerik
Indeed, currently the recommended approach to achieve a DateTimePicker experience is to bind a DatePicker and a TimePicker to the same value. This approach typically works as expected, but does not work as expected when the components are bound to a reactive form control due to issues that are also logged to the Angular repo:
https://github.com/angular/angular/issues/14451
https://github.com/angular/angular/issues/13792
What happens is when the value of the DatePicker is changed, the value of the form control changes, but this in turn does not change the value of the TimePicker. Its date-part of the value still remains the initial form control's date value, thus when the time portion is changed through the TimePicker, the date portion also is reverted to the previous one.
There are three possible approaches to achieve the desired functionality:
1) Use template forms instead of reactive forms (as [(ngModel)] binding works as expected)
2) Use the DatePicker and TimePicker [(value)] bindings to ensure two-way binding to the model:
https://plnkr.co/edit/WbL1Cn6pE1yTeAzF5EBp?p=preview (maybe the most straight-forward approach)
3) Create a custom form control component that internally has a DatePicker and a TimePicker bound to the same value and use this single component in the Grid EditTemplate
I hope this helps.
Regards,
Dimiter Topalov
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
Casper
Top achievements
Rank 1
Rank 1
answered on 22 Jun 2018, 09:53 AM
Thank you very much!