smart date time picker bug with reactive form patchvalue

[davout]

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?
 
 
 
 
 
 
 

[admin]

Hi davout,
Please, share a code that demonstrates the reported behavior
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[davout]

It 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 form

this.taskForm.get(this.CONTROL_SCHEDULED_DATE).patchValue(null);

[yavordashew]

Hi 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/

[Author]

Posts