Topic: MDB Datepicker startDate bug
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 3 years 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);
  }
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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