For a project I am working on, I have implemented a v-date-picker where users can select a departure date and a return date. Interestingly, while most of the input field validations only occur after user interaction, the departure date picker displays an error message "Please select a date" upon page load, whereas the return date picker does not show any errors regardless of the selected date.
Here is the code for the date pickers:
<v-row>
<v-col cols="auto" sm="6">
<v-menu v-model="departPicker" :close-on-content-click="false" transition="scale-transition" offset-y min-width="auto" >
<template v-slot:activator="{ on, attrs }">
<v-card-text style="padding: 0px;">Departure Date</v-card-text>
<v-text-field dense outlined readonly v-bind="attrs" v-on="on" v-model="genInfoObject.departureDate" :rules="departureDateRules"/>
</template>
<v-date-picker v-model="genInfoObject.departureDate"/>
</v-menu>
</v-col>
<v-col cols="auto" sm="6">
<v-menu v-model="returnPicker" :close-on-content-click="false" transition="scale-transition" offset-y min-width="auto">
<template v-slot:activator="{ on, attrs }">
<v-card-text style="padding: 0px;">Return Date</v-card-text>
<v-text-field dense outlined readonly v-bind="attrs" v-on="on" v-model="genInfoObject.returnDate" :rules="returnDateRules"/>
</template>
<v-date-picker v-model="genInfoObject.returnDate" />
</v-menu>
</v-col>
</v-row>
Here is the code for the validation rules:
departureDateRules: [
v => !!v || 'Departure date is required',
v => v >= new Date().toISOString().slice(0, 10) || "Departure date can't be prior to today's date"
],
returnDateRules: [
v => !!v || 'Return date is required',
v => v >= new Date().toISOString().slice(0, 10) || "Return date can't be prior to today's date",
v => v <= this.genInfoObject.departureDate || "Return date can't be before departure date",
],
departPicker: false,
returnPicker: false