The following code can be used to add calendar in a vue js page and disable the specific dates.
const disableDates = (date) => {
const today = new Date();
today.setHours(0, 0, 0, 0);
// Check if the date is before today
const isBeforeToday = date < today;
const availability = [
data.sundayAvail,
data.mondayAvail,
data.tuesdayAvail,
data.wednesdayAvail,
data.thursdayAvail,
data.fridayAvail,
data.saturdayAvail,
];
// Disable dates where the corresponding day is unavailable
const isDayUnavailable = !availability[date.getDay()];
return isBeforeToday || isDayUnavailable;
}
<form class="box">
<!-- Calendar Section -->
<div class="column is-8">
<div class="box">
<label class="label">Select Installation Date</label>
<Datepicker v-model="data.selectedDate" :format="'dd/MM/yyyy'" :disabled-dates="disableDates" @change="handleDateSelection" />
<!-- <p v-if="selectedDate" class="mt-2">Selected Date: {{ selectedDate.toLocaleDateString() }}</p> -->
</div>
</div>
</form>