2
0
mirror of https://github.com/tenrok/vue2-datepicker.git synced 2026-06-14 22:52:26 +03:00

docs: update the disabledDate demo

This commit is contained in:
mengxiong10
2020-06-05 10:50:21 +08:00
parent 051ad89c24
commit 661b377829
3 changed files with 25 additions and 31 deletions
+23 -25
View File
@@ -1,31 +1,32 @@
<template>
<div class="box">
<section>
<p>date not before today</p>
<date-picker v-model="value1" :disabled-date="notBeforeToday"></date-picker>
<p>Not before than today and not after than a week</p>
<date-picker
v-model="value1"
:default-value="new Date()"
:disabled-date="disabledBeforeTodayAndAfterAWeek"
></date-picker>
</section>
<section>
<p>date not after today</p>
<date-picker v-model="value2" :disabled-date="notAfterToday"></date-picker>
</section>
<section>
<p>time not before 09:00</p>
<p>Not before 09:00</p>
<date-picker
v-model="value3"
value-type="format"
type="time"
placeholder="HH:mm:ss"
:default-value="new Date().setHours(9, 0, 0)"
:disabled-time="notBeforeNine"
:default-value="new Date().setHours(9, 0, 0, 0)"
:disabled-time="notBeforeNineOClock"
></date-picker>
</section>
<section>
<p>datetime not before 2019-10-09 12:00</p>
<p>Not before than 12:00 Today</p>
<date-picker
v-model="value4"
type="datetime"
:disabled-date="notBeforeDate"
:disabled-time="notBeforeTime"
:default-value="new Date().setHours(12, 0, 0, 0)"
:disabled-date="notBeforeToday"
:disabled-time="notBeforeTodayTwelveOClock"
value-type="format"
></date-picker>
</section>
@@ -33,9 +34,6 @@
</template>
<script>
const today = new Date();
today.setHours(0, 0, 0, 0);
export default {
data() {
return {
@@ -47,20 +45,20 @@ export default {
};
},
methods: {
notBeforeToday(date) {
return date < today;
disabledBeforeTodayAndAfterAWeek(date) {
const today = new Date();
today.setHours(0, 0, 0, 0);
return date < today || date > new Date(today.getTime() + 7 * 24 * 3600 * 1000);
},
notAfterToday(date) {
return date > today;
},
notBeforeNine(date) {
notBeforeNineOClock(date) {
return date.getHours() < 9;
},
notBeforeDate(date) {
return date < new Date(2019, 9, 9);
notBeforeToday(date) {
return date < new Date(new Date().setHours(0, 0, 0, 0));
},
notBeforeTime(date) {
return date < new Date(2019, 9, 9, 12);
notBeforeTodayTwelveOClock(date) {
return date < new Date(new Date().setHours(12, 0, 0, 0));
},
},
};
+1 -3
View File
@@ -27,9 +27,7 @@ Support to select a date range.
Disabled part of dates and time by `disabledDate` and `disabledTime` respectively.
You should let the value of `defaultValue` not be disabled, when you use `disabledDate` or `disabledTime`.
The default value of `defaultValue` is `new Date().setHour(0,0,0,0)`.
**You should let the `defaultValue` not be disabled, when you use `disabledDate` or `disabledTime`.**
<!-- Disabled -->
+1 -3
View File
@@ -27,9 +27,7 @@
可用 `disabledDate``disabledTime` 分别禁止选择部分日期和时间.
当你使用`disabledDate``disabledTime`的时候, 应该设置`defaultValue`的值是不被禁止选择的.
`defaultValue`的默认值是`new Date().setHour(0,0,0,0)`
**当你使用`disabledDate` 或 `disabledTime`的时候, 应该设置`defaultValue`的值是不被禁止选择的.**
<!-- Disabled -->