Good day Developer, I have two input boostrap datepicker for a user to select and I want if the first date field is selected, the next date field should start from a day plus the start date initially selected on the first date field. this is my first Input field:
<input
(blur)="setMinDate($event)"
id="StartTime"
type="text"
name="StartTime"
class="form-control"
bsDatepicker
datePickerLuxonModifier
[(date)]="userFirstInput.startTime"
[(ngModel)]="userFirstInput.startTime"
[maxDate]="userFirstInput.endTime"
[minDate]="startdate"
[bsConfig]="{ adaptivePosition: true }"
required
/>
this is the second input field:
<input
id="EndTime"
type="text"
name="EndTime"
class="form-control"
bsDatepicker
datePickerLuxonModifier
[(date)]="userSecondInput.endTime"
[(ngModel)]="userSecondInput.endTime"
[minDate]="minPickDate"
[bsConfig]="{ adaptivePosition: true }"
required
/>
the function am applying on first date input in order to store the get the date pick on first input date and add a day to it, which will be use as [minDate] on the second input date field:
minPickDate: DateTime;
setMinDate(event){
this.minPickDate = this.userFirstInput.startTime.plus({days:1});
}
But is not working, I try using ngModelChange and Change event but it still didn't work out. Please I need help.
Try to below using bsValueChange, I hope it work for you
<input
(bsValueChange)="setMinDate($event)"
id="StartTime"
type="text"
name="StartTime"
class="form-control"
bsDatepicker
datePickerLuxonModifier
[(date)]="userFirstInput.startTime"
[(ngModel)]="userFirstInput.startTime"
[maxDate]="userFirstInput.endTime"
[minDate]="startdate"
[bsConfig]="{ adaptivePosition: true }"
(bsValueChange)= "setMinDate($event)"
required />
ts minPickDate : date;
setMinDate(value){
var nextDay = new Date(value);
nextDay.setDate(nextDay.getDate() + 1);
this.minPickDate = nextDay;
}