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 2 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