<template> <DocSectionText v-bind="$attrs"> <p>Boundaries for the permitted dates that can be entered are defined with <i>minDate</i> and <i>maxDate</i> properties.</p> </DocSectionText> <div class="card flex justify-center"> <DatePicker v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" /> </div> <DocSectionCode :code="code" /> </template> <script> export default { data() { return { date: null, minDate: null, maxDate: null, code: { basic: ` <DatePicker v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" /> `, options: ` <template> <div class="card flex justify-center"> <DatePicker v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" /> </div> </template> <script> export default { data() { return { date: null, minDate: null, maxDate: null }; }, created() { let today = new Date(); let month = today.getMonth(); let year = today.getFullYear(); let prevMonth = month === 0 ? 11 : month - 1; let prevYear = prevMonth === 11 ? year - 1 : year; let nextMonth = month === 11 ? 0 : month + 1; let nextYear = nextMonth === 0 ? year + 1 : year; this.minDate = new Date(); this.minDate.setMonth(prevMonth); this.minDate.setFullYear(prevYear); this.maxDate = new Date(); this.maxDate.setMonth(nextMonth); this.maxDate.setFullYear(nextYear); } }; <\/script> `, composition: ` <template> <div class="card flex justify-center"> <DatePicker v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" /> </div> </template> <script setup> import { ref } from "vue"; let today = new Date(); let month = today.getMonth(); let year = today.getFullYear(); let prevMonth = (month === 0) ? 11 : month -1; let prevYear = (prevMonth === 11) ? year - 1 : year; let nextMonth = (month === 11) ? 0 : month + 1; let nextYear = (nextMonth === 0) ? year + 1 : year; const date = ref(); const minDate = ref(new Date()); const maxDate = ref(new Date()); minDate.value.setMonth(prevMonth); minDate.value.setFullYear(prevYear); maxDate.value.setMonth(nextMonth); maxDate.value.setFullYear(nextYear); <\/script> ` } }; }, created() { let today = new Date(); let month = today.getMonth(); let year = today.getFullYear(); let prevMonth = month === 0 ? 11 : month - 1; let prevYear = prevMonth === 11 ? year - 1 : year; let nextMonth = month === 11 ? 0 : month + 1; let nextYear = nextMonth === 0 ? year + 1 : year; this.minDate = new Date(); this.minDate.setMonth(prevMonth); this.minDate.setFullYear(prevYear); this.maxDate = new Date(); this.maxDate.setMonth(nextMonth); this.maxDate.setFullYear(nextYear); } }; </script>