disable future dates in vue3 using vue-2 datepicker?

Question

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"
/>

Kapcash · Accepted Answer · 2022-04-12 10:43:21Z

4

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>

answered Apr 12, 2022 at 10:43

Kapcash

6,9902 gold badges22 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

disable future dates in vue3 using vue-2 datepicker?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related