Reply To: smart date time picker bug with reactive form patchvalue

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