Add a date calendar and disable specific dates in vue js

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>

Leave a comment

Your email address will not be published. Required fields are marked *