[Vuejs]-Disable choosing date before today in vuejs-datetimepicker

I don’t think that package supports mechanism to disable choosing dates before today, but I can offer you a hacky solution.

First, we can add ref="datePicker" to the DatePicker component:

<Datepicker format="YYYY-MM-DD H:i:s" width="100%" ref="datePicker" />

Then we can listen to data changes inside that component and add it to mounted() with this:

  ...
  this.$watch("$refs.datePicker.timeStamp", (new_value, old_value) => {
    this.calendarOnChange();
  });
  ...

Then, on that function, we can add class to the disabled days, like this:

    calendarOnChange() {
      const days = document.getElementsByClassName("port");
      [...days].forEach((day) => {
        const timestamp = new Date(
          this.$refs.datePicker.year,
          this.$refs.datePicker.monthIndex,
          day.innerText
        );

        const today = new Date();
        today.setHours(0, 0, 0, 0);

        if (timestamp < today) {
          day.classList.add("beforeToday");
        } else {
          day.classList.remove("beforeToday");
        }
      });
    },

The above function checks every single renderred days and compare them to today’s date.

Finally, we can add CSS to disable clicking on the dates in which are before today:

.beforeToday {
  color: #bbb;
  pointer-events: none;
}

Forked sandbox:

To disable choosing dates before today using the vue3-datepicker component, you need to utilize the :disabled-dates prop. This prop allows you to specify a function that determines which dates should be disabled.

Here’s how you can achieve this:

<template>
  <div id="app">
    <date-picker v-model="date" :disabled-dates="disablePastDates" />
  </div>
</template>

<script>
import { ref } from "vue";
import DatePicker from "vue3-datepicker";

export default {
  components: {
    DatePicker,
  },
  setup() {
    const date = ref(new Date());

    // Function to disable past dates
    const disablePastDates = (date) => {
      const today = new Date();
      return date < today;
    };

    return {
      date,
      disablePastDates,
    };
  },
};
</script>