JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Date & Time Pickers › smart date time picker bug with reactive form patchvalue
Tagged: datetimepicker reactive form, form, reactive form
- This topic has 3 replies, 3 voices, and was last updated 3 years, 7 months ago by yavordashew.
-
AuthorPosts
-
March 4, 2021 at 1:37 pm #101572davoutMember
I have found a bug with ‘smart-date-time-picker’ in an Angular (10) reactive form
There is a situation where I can…
1). Click on the date picker to set the date
2). Click on a ‘Today’ button on the form that will set the date of the picker to ‘today’ using the reactive form ‘patchValue’ method
3). Click on a ‘Clear’ button on the form that will reset the date picker value to null
If I run option (1) followed by option (3) then the date value in the picker is cleared to null as expected
If I run option (2) followed by option (3) then date value in the picker is NOT cleared to null and it still shows today’s date incorrectly
A bug?
March 4, 2021 at 1:43 pm #101574adminKeymasterHi davout,
Please, share a code that demonstrates the reported behavior
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/March 4, 2021 at 3:43 pm #101575davoutMemberIt is not practical to break out the code for very bug. I have provided a clear replication path, and I would expect a support function to do that as part of their role.
The component mark up is shown below…
<smart-date-time-picker
formatString=”ddd dd-MMM-yyyy”
dropDownDisplayMode=”calendar”
drop-down-position=”bottom”
calendar-button placeholder=”for”
style=”width: 180px”
[nullable]=”true”
[autoClose]=”true”
formControlName=”scheduledDate”
[dropDownAppendTo]=”‘body'”
>
</smart-date-time-picker>
… Thiss is how I can calling the control in a reactive formthis.taskForm.get(this.CONTROL_SCHEDULED_DATE).patchValue(null);
March 5, 2021 at 11:36 am #101576yavordashewMemberHi davout,
IF you want the ‘date-time-picker’ to display the correct date you have to pass the value to it in a ‘new Date()’ constructor, also if you want to make the ‘date-time-pciker’ reactive you have to bind its value property to the corresponding FormControl instance.
I have made a code very basic code example for you:
//In your app.component.html file :<smart-date-time-picker #datetimepicker [calendarButton]="true" [formatString]="'ddd dd-MMM-yyyy'" [dropDownDisplayMode]="'calendar'" [enableMouseWheelAction]="true" [dropDownPosition]="'bottom'" [spinButtons]="true" [value] = "dateValue.value" [spinButtonsPosition]="'left'"> </smart-date-time-picker> <br><br> <label> Date: <input type="text" [formControl]="dateValue"> </label> <p>Date Value: {{ dateValue.value }}</p> <button (click) = "updateDate()"> Another date </button> <button (click) = "clearDate()"> Today's date </button>
//And in your app.component.ts file :
export class AppComponent implements AfterViewInit, OnInit { @ViewChild('datetimepicker', { read: DateTimePickerComponent, static: false }) datetimepicker: DateTimePickerComponent; dateValue = new FormControl(new Date('1995-12-17T03:24:00')); updateDate(){ this.dateValue.patchValue(new Date('November 16, 1994 03:24:00')); this.datetimepicker.value = this.dateValue.value; } clearDate(){ this.dateValue.patchValue(null) this.datetimepicker.value = this.dateValue.value; } ngOnInit(): void { // onInit code. } ngAfterViewInit(): void { // afterViewInit code. this.init(); } init(): void { this.datetimepicker.value = this.dateValue.value; } }
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/ -
AuthorPosts
- You must be logged in to reply to this topic.