JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Date & Time Pickers smart date time picker bug with reactive form patchvalue

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #101572

    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?


    Hi davout,
    Please, share a code that demonstrates the reported behavior
    Best regards,
    Peter Stoev
    Smart UI Team


    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…
    formatString=”ddd dd-MMM-yyyy”
    calendar-button placeholder=”for”
    style=”width: 180px”

    … Thiss is how I can calling the control in a reactive form


    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
                            [formatString]="'ddd dd-MMM-yyyy'"
                            [value] = "dateValue.value"
      <input type="text" [formControl]="dateValue">
    <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'));
          this.dateValue.patchValue(new Date('November 16, 1994 03:24:00'));
          this.datetimepicker.value = this.dateValue.value;
        this.datetimepicker.value = this.dateValue.value;
    	ngOnInit(): void {
    		// onInit code.
    	ngAfterViewInit(): void {
    		// afterViewInit code.
    	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

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.