I am new to vue js, I am not sure why my code is not working, what I want is make a input field as a date-picker to accept the old dates only as its a birthday field
I used the max attribute but it seems not working or I am doing something wrong, so please help me to know what the issue, thanks in advance
Here my component code :
<template>
<div>
<div class="md:w-7/12 mx-auto">
<div class="flex flex-wrap -mx-3 mt-6">
<div class="w-full px-3 mb-6 md:mb-0">
<label
class="block tracking-wide text-gray-700 text-xs font-bold mb-2"
>
Birth date
</label>
<div class="relative">
<v-date-picker
v-model="form.birthday"
:max="maxDate"
@input="handleDateInput"
>
<template v-slot:input="{ inputEvents, inputValue }">
<input
:value="inputValue"
v-on="inputEvents"
id="grid-birthdate"
type="text"
name="birthdate"
:errors="validations['birthdate']"
class="focus:ring-primary focus:border-primary block w-full sm:text-sm
border border-gray-300 bg-gray-100 appearance-none outline-none"
/>
</template>
</v-date-picker>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
//import Form from "vform";
export default {
data() {
return {
form: {
birthday: null,
},
maxDate: new Date("2008-09-01").toISOString().split("T")[0],
validations: [],
countries: [],
};
},
mounted() {
//
},
computed: {},
methods: {
handleDateInput(value) {
console.log("Date Input Event:", value);
this.form.birthday = value; // Ensure the value is updated
},
// getDisableDatesFunction(maxDate) {
// const maxDateParsed = maxDate;
// return (date) => {
// console.log(
// "Disabling dates after:",
// maxDateParsed.toISODate()
// );
// console.log("Current date being checked:", date);
// return (
// DateTime.fromISO(date).toJSDate() >
maxDateParsed.toJSDate()
// );
// };
// },
},
};
</script>
<style></style>
BTW I tried also disable the future dates but also faced some issues, and the whole date-picker disabled, but anyway I think better to use max.