Блокировка дат в календаре vue

Question

Блокировка дат в календаре vue

Рейтинг: 1Ответов: 1Опубликовано: 01.08.2023

Подскажите, как заблокировать прошедшие даты в календаре во vue + сегодняшний день.

<CustomInput type="date"/>

javascript vue.js

Источник: Stack Overflow на русском

Answer 1

▲ 0

<template>
  <div>
    <CustomInput type="date" :min="minDate" :max="maxDate" v-model="selectedDate" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null,
    };
  },
  computed: {
    minDate() {
      // Получаем текущую дату и преобразуем в формат YYYY-MM-DD,
      // чтобы использовать в атрибуте 'min'
      const today = new Date().toISOString().split("T")[0];
      return today;
    },
    maxDate() {
      // Оставим максимальную дату неограниченной (по желанию)
      return null;
    },
  },
};
</script>

В этом примере minDate вычисляется как текущая дата, и она будет ограничивать выбор дат, предотвращая выбор прошедших дат и сегодняшнего дня. Атрибут maxDate не установлен, чтобы не ограничивать верхнюю дату, но вы можете задать его, если хотите ограничить максимально допустимую дату.

Помимо этого, вы можете стилизовать ваш компонент CustomInput по вашим потребностям и учесть визуальное представление заблокированных дат.

Блокировка дат в календаре vue

Ответы