My Vue.js form includes two BootstrapVue datepickers for holiday management. Users can define the start date and end date of their holiday, with the condition that the end date must be equal to or greater than the start date. Here is my current implementation:
<b-form-group
id="input-group-3"
label="Start Date:"
label-for="input-3"
>
<b-form-datepicker
id="input-3"
v-model="from"
placeholder="Select Start Date"
required
:min="minStart"
></b-form-datepicker>
</b-form-group>
<b-form-group id="input-group-4" label="End Date:" label-for="input-4">
<b-form-datepicker
id="input-4"
v-model="to"
placeholder="Select End Date"
:min="minEnd"
required
></b-form-datepicker>
</b-form-group>
The data section in Vue is structured as follows:
data() {
const date = new Date();
const todayDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
const minFrom = new Date(todayDate);
minFrom.setDate(minFrom.getDate()+ 1);
const minTo = new Date(todayDate);
minTo.setDate(minTo.getDate()+1);
return {
HolidayType: "",
Reason: "",
from: "",
to: "",
Status: "",
UserID: 24,
minStart: minFrom,
minEnd: minTo,
types: [
{ value: null, text: "Select Holiday Type" },
{ value: "Vacation", text: "Vacation" },
{ value: "Special Leave", text: "Special Leave" },
],
reasons: [
{ value: "Moving", text: "Moving" },
{ value: "Wedding", text: "Wedding" },
{ value: "Birth", text: "Birth" },
{ value: "Other", text: "Other" },
],
VacationDays: "",
};
}
How can I ensure that the end date is either equal to or greater than the start date?