CODEWITHSUNDEEP
vue.js
Peter Achieng
Peter Achieng

Reputation: 31

disable future dates in vue3 using vue-2 datepicker?

How can I disable future dates while using date range?

<date-picker
 v-model="params.range"
 type="date"
 value-type="format"
 format="YYYY-MM-DD"
 range
 placeholder="Filter by date range"
/>

Upvotes: 3

Views: 5165

Answers (1)

Kapcash
Kapcash

Reputation: 6909

You can use the disabled-date prop to provide a function telling if a date should be disabled or not.

From the vue2-datepicker documentation demo (source code)

<template>
  <div>
    <p>Not before than today and not after than a week</p>
    <date-picker
      v-model="value1"
      :default-value="new Date()"
      :disabled-date="disabledAfterToday"
    ></date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: new Date(),
    };
  },
  methods: {
    disabledAfterToday(date) {
      const today = new Date();
      today.setHours(0, 0, 0, 0);
      return date > today
    },
  },
};
</script>

Upvotes: 4

Related Questions