Skip to content

Commit 661b377

Browse files
committed
docs: update the disabledDate demo
1 parent 051ad89 commit 661b377

File tree

3 files changed

+25
-31
lines changed

3 files changed

+25
-31
lines changed

example/demo/DisabledDateTime.vue

Lines changed: 23 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,39 @@
11
<template>
22
<div class="box">
33
<section>
4-
<p>date not before today</p>
5-
<date-picker v-model="value1" :disabled-date="notBeforeToday"></date-picker>
6-
</section>
7-
<section>
8-
<p>date not after today</p>
9-
<date-picker v-model="value2" :disabled-date="notAfterToday"></date-picker>
4+
<p>Not before than today and not after than a week</p>
5+
<date-picker
6+
v-model="value1"
7+
:default-value="new Date()"
8+
:disabled-date="disabledBeforeTodayAndAfterAWeek"
9+
></date-picker>
1010
</section>
1111
<section>
12-
<p>time not before 09:00</p>
12+
<p>Not before 09:00</p>
1313
<date-picker
1414
v-model="value3"
1515
value-type="format"
1616
type="time"
1717
placeholder="HH:mm:ss"
18-
:default-value="new Date().setHours(9, 0, 0)"
19-
:disabled-time="notBeforeNine"
18+
:default-value="new Date().setHours(9, 0, 0, 0)"
19+
:disabled-time="notBeforeNineOClock"
2020
></date-picker>
2121
</section>
2222
<section>
23-
<p>datetime not before 2019-10-09 12:00</p>
23+
<p>Not before than 12:00 Today</p>
2424
<date-picker
2525
v-model="value4"
2626
type="datetime"
27-
:disabled-date="notBeforeDate"
28-
:disabled-time="notBeforeTime"
27+
:default-value="new Date().setHours(12, 0, 0, 0)"
28+
:disabled-date="notBeforeToday"
29+
:disabled-time="notBeforeTodayTwelveOClock"
2930
value-type="format"
3031
></date-picker>
3132
</section>
3233
</div>
3334
</template>
3435

3536
<script>
36-
const today = new Date();
37-
today.setHours(0, 0, 0, 0);
38-
3937
export default {
4038
data() {
4139
return {
@@ -47,20 +45,20 @@ export default {
4745
};
4846
},
4947
methods: {
50-
notBeforeToday(date) {
51-
return date < today;
52-
},
53-
notAfterToday(date) {
54-
return date > today;
48+
disabledBeforeTodayAndAfterAWeek(date) {
49+
const today = new Date();
50+
today.setHours(0, 0, 0, 0);
51+
52+
return date < today || date > new Date(today.getTime() + 7 * 24 * 3600 * 1000);
5553
},
56-
notBeforeNine(date) {
54+
notBeforeNineOClock(date) {
5755
return date.getHours() < 9;
5856
},
59-
notBeforeDate(date) {
60-
return date < new Date(2019, 9, 9);
57+
notBeforeToday(date) {
58+
return date < new Date(new Date().setHours(0, 0, 0, 0));
6159
},
62-
notBeforeTime(date) {
63-
return date < new Date(2019, 9, 9, 12);
60+
notBeforeTodayTwelveOClock(date) {
61+
return date < new Date(new Date().setHours(12, 0, 0, 0));
6462
},
6563
},
6664
};

example/en.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,7 @@ Support to select a date range.
2727

2828
Disabled part of dates and time by `disabledDate` and `disabledTime` respectively.
2929

30-
You should let the value of `defaultValue` not be disabled, when you use `disabledDate` or `disabledTime`.
31-
32-
The default value of `defaultValue` is `new Date().setHour(0,0,0,0)`.
30+
**You should let the `defaultValue` not be disabled, when you use `disabledDate` or `disabledTime`.**
3331

3432
<!-- Disabled -->
3533

example/zh-cn.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,7 @@
2727

2828
可用 `disabledDate``disabledTime` 分别禁止选择部分日期和时间.
2929

30-
当你使用`disabledDate``disabledTime`的时候, 应该设置`defaultValue`的值是不被禁止选择的.
31-
32-
`defaultValue`的默认值是`new Date().setHour(0,0,0,0)`
30+
**当你使用`disabledDate``disabledTime`的时候, 应该设置`defaultValue`的值是不被禁止选择的.**
3331

3432
<!-- Disabled -->
3533

0 commit comments

Comments
 (0)