106 lines
3.0 KiB
Vue
106 lines
3.0 KiB
Vue
<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>
|