Topic: MDB Datepicker startDate bug

agenda priority asked 4 months ago


Expected behavior

I have two date input fields (two datepickers - datepicker 'from' and datepicker 'to'). When i set date in the first input field, then I set the [startDate] to second datepicker. (so the second datepicker should not have lower date than the first datepicker). This works fine.

Actual behavior

If I change the date on the first input the startDate when I have already set the date on the second datepicker, than the second datepicker's [startDate] restes and the startDate changes to today's date.. I want that [startDate] changes again and works again.

Resources

Datepicker FROM

    <div>
      <input
        mdbInput
        [mdbDatepicker]="datepickerOd"
        type="text"
        class="form-control"
        id="dpOd"
        formControlName="datumOd"
      />
      <label mdbLabel for="dpOd" class="form-label">from</label>
      <mdb-datepicker-toggle
        [mdbDatepicker]="datepickerOd"
      ></mdb-datepicker-toggle>
      <mdb-datepicker
        [inline]="true"
        #datepickerOd
        [format]="'dd. mm. yyyy'"
        (dateChanged)="onDatepickeChangedn($event)"
      ></mdb-datepicker>
    </mdb-form-control>
  </div>

Datepicker To

    <div
    class="col-12 col-md-6 col-xl-4 mb-4"
  >
    <mdb-form-control
      class="d-flex align-items-center"
    >
      <input
        mdbInput
        [mdbDatepicker]="datepickerDo"
        type="text"
        class="form-control"
        id="dpDo"
        formControlName="datumDo"
      />
      <label mdbLabel for="dpDo" class="form-label">TO}</label>
      <mdb-datepicker-toggle
        [mdbDatepicker]="datepickerDo"
      ></mdb-datepicker-toggle>
      <mdb-datepicker
        [inline]="true"
        #datepickerDo
        [format]="'dd. mm. yyyy'"
        [startDay]="1"
        [startDate]="startDate"
        [minDate]="minDateTo"
      ></mdb-datepicker>
    </mdb-form-control>
  </div>

Function:

onDatepickeChangedn($event: any) {
  this.minDateTo = new Date($event );  
  this.startDate = new Date($event);

}


Michał Duszak staff answered 4 months ago


Hello, everything seems to work fine but I couldn't run the given code because of no defined formGroup, or initialized variables such as minDateTo and startDate. Please tell me if the issue still occurs for the following code:

Template:

<div [formGroup]="myGroup">
  <div class="col-12 col-md-6 col-xl-4 mb-4">
    <mdb-form-control class="d-flex align-items-center">
      <input
        mdbInput
        [mdbDatepicker]="datepickerOd"
        type="text"
        class="form-control"
        id="dpOd"
        formControlName="datumOd"
      />
      <label mdbLabel for="dpOd" class="form-label">from</label>
      <mdb-datepicker-toggle [mdbDatepicker]="datepickerOd"></mdb-datepicker-toggle>
      <mdb-datepicker
        [inline]="true"
        #datepickerOd
        [format]="'dd. mm. yyyy'"
        (dateChanged)="onDatepickeChangedn($event)"
      ></mdb-datepicker>
    </mdb-form-control>
  </div>

  <div class="col-12 col-md-6 col-xl-4 mb-4">
    <mdb-form-control class="d-flex align-items-center">
      <input
        mdbInput
        [mdbDatepicker]="datepickerDo"
        type="text"
        class="form-control"
        id="dpDo"
        formControlName="datumDo"
      />
      <label mdbLabel for="dpDo" class="form-label">TO}</label>
      <mdb-datepicker-toggle [mdbDatepicker]="datepickerDo"></mdb-datepicker-toggle>
      <mdb-datepicker
        [inline]="true"
        #datepickerDo
        [format]="'dd. mm. yyyy'"
        [startDay]="1"
        [startDate]="startDate"
        [minDate]="minDateTo"
      ></mdb-datepicker>
    </mdb-form-control>
  </div>
</div>

Class of the component:

  minDateTo = new Date();
  startDate = new Date();

  myGroup: FormGroup = new FormGroup({
    datumOd: new FormControl(),
    datumDo: new FormControl(),
  });

  onDatepickeChangedn($event: any) {
    this.minDateTo = new Date($event);
    this.startDate = new Date($event);
  }


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 2.3.0
  • Device: Lenovo
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No