Unexpected behaviour for previous/selected date

[Mokette]

Hello, i've just noticed a strange behaviour when i pick a date in the datetime-picker component.

The component is init with DateX, i click on the input i pick a DateY, the DateY is correctly shown inside the input but when i click again to open the datetime-picker, the selected date on the calendar is DateX

I use it that way :

• package.json :

  "@angular-material-components/datetime-picker": "4.0.3",
  "@angular-material-components/moment-adapter": "4.0.1",
  "@angular/cdk": "10.2.1",
  "@angular/common": "10.1.1",
  "@angular/compiler": "10.1.1",
  "@angular/core": "10.1.1",
  "@angular/forms": "10.1.1",
  "@angular/localize": "10.1.1",
  "@angular/material": "10.2.1",
  "@angular/material-moment-adapter": "10.2.1",
  "@angular/router": "10.1.1",

  i configure it to use moment format in my components :

  @Component({
  selector: 'my-component',
  templateUrl: './component.html',
  providers: [
      LoginService,
      {
          provide: NGX_MAT_DATE_FORMATS,
          useValue: MY_NGXMATCALENDAR_MOMENT_FORMATS
      }
  ]
  })

  with my custom format :

  export const MY_NGXMATCALENDAR_MOMENT_FORMATS = {
  parse: {
      dateInput: 'L LT'
  }, 
  display: {
      dateInput: 'L LT',
      timeInput: 'LT',
      monthYearLabel: 'MMMM YYYY',
      dateA11yLabel: 'LL',
      monthYearA11yLabel: 'MMMM-YYYY',
  }
  }

  and in the html part :

  <div class="create-meeting-date">
  <div class="custom_matpicker">
      <label for="startDate" class="labelForm">{{"beginning" | translatePipe}}</label>
      <span class="dateLabel">{{"beginning" | translatePipe}}</span>
      <input class="form-control flat no-border-color" matInput
          [ngxMatDatetimePicker]="pickerStartDate" name="startDate"
          placeholder="{{'start date' | translatePipe}}" [(ngModel)]="startDate"
          (ngModelChange)="checkDate(startDate, endDate)"
          (click)="pickerStartDate.open();changeCalendarClass()"
          [disabled]="allDayLong "
          required [ngClass]="{'not-valid-input': !datesOk && !startOk}">
      <ngx-mat-datetime-picker #pickerStartDate  [enableMeridian]="my_lang == 'en-US'"></ngx-mat-datetime-picker>
  </div>
  </div>
  <div class="create-meeting-date">
  <div class="custom_matpicker">
      <label for="endDate" class="labelForm">{{"end" | translatePipe}}</label>
      <span class="dateLabel">{{"end" | translatePipe}}</span>
      <input class="form-control flat no-border-color" matInput
          [ngxMatDatetimePicker]="pickerEndDate" name="endDate"
          placeholder="{{'end date' | translatePipe}}" [(ngModel)]="endDate"
          (ngModelChange)="checkDate(startDate, endDate)"
          (click)="pickerStartDate.open();changeCalendarClass()" [min]="startDate"
          [disabled]="allDayLong "
          required [ngClass]="{'not-valid-input': !datesOk && !endOk}">
      <ngx-mat-datetime-picker #pickerEndDate  [enableMeridian]="my_lang == 'en-US'"></ngx-mat-datetime-picker>
  </div>
  </div>

the checkDate() function doesn't modify the variables only check the duration.

Thanks for you help if you can provide some :) Stay available for further informations if needed.

Regards,

[Mokette]

I think i find why i didn't have toe correct behaviour, it's because i use (click)="pickerStartDate.open();" to open the calendar and not a <mat-datepicker-toggle matSuffix [for]="pickerStartDateMeeting"></mat-datepicker-toggle> So i guess the pickerStartDate.open() don't do the same action than the mat-datepicker-toggle

Is there a way to have the correct behaviour without using the mat-datepicker-toggle ?

Regards,

[gandalf-3d]

Same problem with angular 10.1. picker.open() does not set the last selected value.

[gandalf-3d]

i found a solution

  inputClick(datetimePicker: NgxMatDatetimePicker<any>) {
    if (this.form.get('field').value)
      datetimePicker._selected = this.form.get('field').value;
    datetimePicker.open();
  }