Skip to content

Commit ab375af

Browse files
kouchaokouchao
committed
feat: 新增 限制时间
1 parent b37d771 commit ab375af

File tree

7 files changed

+127
-13
lines changed

7 files changed

+127
-13
lines changed

‎src/components/date-picker/README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@
77
- [x] 自定义日期格式
88
- [x] 公历节日
99
- [x] 自定义重要日子
10-
- [ ] 限制可选日期
11-
- [ ] 限制日期前后几天
10+
- [x] 限制可选日期
1211
- [ ] 日期多选
1312
- [ ] 多种款色任你挑选
1413
- [ ] 多种事件供你使用
@@ -19,4 +18,5 @@
1918
- [ ] 年范围
2019
- [ ] 年月范围
2120
- [ ] 时间范围
22-
- [ ] 日期时间范围
21+
- [ ] 日期时间范围
22+
- [ ] 双向数据绑定

‎src/components/date-picker/src/content/date-table.vue

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,12 @@
2121
v-for="date in week"
2222
:key="`td/${date.key}`"
2323
:class="{
24+
'laydate-disabled': isPrev(date) || isNext(date),
2425
'laydate-day-prev': isPrev(date),
25-
'laydate-day-next': date.month > month,
26+
'laydate-day-next': isNext(date),
2627
'layui-this': isday(date)
2728
}"
28-
@click="emitChange(date.day, date.month)"
29+
@click="emitChange(date.day, isPrev(date) || isNext(date))"
2930
>
3031
<span
3132
:class="{
@@ -39,6 +40,7 @@
3940
</div>
4041
</template>
4142
<script>
43+
import dayjs from 'dayjs';
4244
import { getDay, getDaysInMonth, getPrevDaysInMonth, getFestival } from '../utils';
4345
4446
export default {
@@ -60,6 +62,14 @@ export default {
6062
importantDays: {
6163
type: Object,
6264
default: () => {}
65+
},
66+
min: {
67+
type: [String, Number],
68+
default: ''
69+
},
70+
max: {
71+
type: [String, Number],
72+
default: ''
6373
}
6474
},
6575
data () {
@@ -140,10 +150,23 @@ export default {
140150
},
141151
// 判断是不是前一个月
142152
isPrev (date) {
143-
return date.month < this.month || date.year < this.year;
153+
let isMin = false;
154+
if (this.min) {
155+
isMin = dayjs(date.key).isBefore(dayjs(this.min));
156+
}
157+
const isPrev = date.year < this.year || date.month < this.month || date.year < this.year;
158+
return isMin || isPrev;
159+
},
160+
isNext (date) {
161+
let isMax = false;
162+
if (this.max) {
163+
isMax = dayjs(this.max).isBefore(dayjs(date.key));
164+
}
165+
const isNext = date.year > this.year || date.month > this.month || date.year > this.year;
166+
return isMax || isNext;
144167
},
145-
emitChange (day, month) {
146-
if (month != this.month) {
168+
emitChange (day, isDisabled) {
169+
if (isDisabled) {
147170
return false;
148171
}
149172
this.$emit('change', day);

‎src/components/date-picker/src/content/month-table.vue

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,32 @@
55
v-for="(monthCn, _month) in months"
66
:key="_month"
77
:class="{
8+
'laydate-disabled': isDisabled(_month),
89
'layui-this': month == _month
910
}"
10-
@click="emitChange(_month)"
11+
@click="emitChange(_month, isDisabled(_month))"
1112
>
1213
{{ monthCn }}
1314
</li>
1415
</ul>
1516
</div>
1617
</template>
1718
<script>
18-
1919
const MONTH_CN = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
2020
export default {
2121
name: 'MonthContent',
2222
props: {
2323
month: {
2424
type: Number,
2525
required: true
26+
},
27+
min: {
28+
type: [String, Number],
29+
default: ''
30+
},
31+
max: {
32+
type: [String, Number],
33+
default: ''
2634
}
2735
},
2836
data () {
@@ -31,8 +39,24 @@ export default {
3139
};
3240
},
3341
methods: {
34-
emitChange (month) {
42+
emitChange (month, isDisabled) {
43+
if (isDisabled) {
44+
return false;
45+
}
3546
this.$emit('change', month);
47+
},
48+
isDisabled (_month) {
49+
let isMin = false;
50+
let isMax = false;
51+
if (this.min) {
52+
isMin = _month < new Date(this.min).getMonth();
53+
}
54+
55+
if (this.max) {
56+
isMax = _month > new Date(this.max).getMonth();
57+
}
58+
59+
return isMin || isMax;
3660
}
3761
}
3862
};

‎src/components/date-picker/src/content/year-table.vue

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@
55
v-for="_year in years"
66
:key="_year"
77
:class="{
8+
'laydate-disabled': isDisabled(_year),
89
'layui-this': year == _year
910
}"
10-
@click="emitChange(_year)"
11+
@click="emitChange(_year, isDisabled(_year))"
1112
>
1213
{{ _year }}年
1314
</li>
@@ -22,6 +23,14 @@ export default {
2223
year: {
2324
type: Number,
2425
required: true
26+
},
27+
min: {
28+
type: [String, Number],
29+
default: ''
30+
},
31+
max: {
32+
type: [String, Number],
33+
default: ''
2534
}
2635
},
2736
data () {
@@ -48,7 +57,23 @@ export default {
4857
this.years = years;
4958
console.log(this.years);
5059
},
51-
emitChange (year) {
60+
isDisabled (_year) {
61+
let isMin = false;
62+
let isMax = false;
63+
if (this.min) {
64+
isMin = _year < new Date(this.min).getFullYear();
65+
}
66+
67+
if (this.max) {
68+
isMax = _year > new Date(this.max).getFullYear();
69+
}
70+
71+
return isMin || isMax;
72+
},
73+
emitChange (year, isDisabled) {
74+
if (isDisabled) {
75+
return false;
76+
}
5277
this.$emit('change', year);
5378
}
5479
}

‎src/components/date-picker/src/date-picker.vue

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,14 @@ export default {
6060
importantDays: {
6161
type: Object,
6262
default: () => {}
63+
},
64+
min: {
65+
type: [String, Number],
66+
default: ''
67+
},
68+
max: {
69+
type: [String, Number],
70+
default: ''
6371
}
6472
},
6573
destroyed () {
@@ -81,6 +89,8 @@ export default {
8189
this.main.$props.format = this.format;
8290
this.main.$props.festival = this.festival;
8391
this.main.$props.importantDays = this.importantDays;
92+
this.main.$props.min = this.min;
93+
this.main.$props.max = this.max;
8494
this.main.$mount();
8595
this.main.$on('change', this.emitChange);
8696
this.main.$on('close', () => {

‎src/components/date-picker/src/main/index.vue

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,22 @@
1717
:day="selectedDay"
1818
:festival="festival"
1919
:important-days="importantDays"
20+
:min="min"
21+
:max="max"
2022
@change="handerDateTableChange"
2123
/>
2224
<month-table
2325
v-else-if="selectedType == 'month'"
2426
:month="selectedMonth"
27+
:min="min"
28+
:max="max"
2529
@change="handerMonthTableChange"
2630
/>
2731
<year-table
2832
v-else-if="selectedType == 'year'"
2933
:year="selectedYear"
34+
:min="min"
35+
:max="max"
3036
@change="handerYearTableChange"
3137
/>
3238
</div>
@@ -91,6 +97,14 @@ export default {
9197
importantDays: {
9298
type: Object,
9399
default: () => {}
100+
},
101+
min: {
102+
type: [String, Number],
103+
default: ''
104+
},
105+
max: {
106+
type: [String, Number],
107+
default: ''
94108
}
95109
},
96110
data () {
@@ -193,6 +207,15 @@ export default {
193207
},
194208
emitChange (isClear) {
195209
let date = dayjs(`${this.selectedYear}-${this.selectedMonth + 1}-${this.selectedDay}`);
210+
211+
if (this.min && date.isBefore(dayjs(this.min))) {
212+
date = dayjs(this.min);
213+
}
214+
215+
if (this.max && dayjs(this.max).isBefore(date)) {
216+
date = dayjs(this.max);
217+
}
218+
196219
let val;
197220
if (!this.format) {
198221
switch (this.type) {

‎src/views/DatePicker.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,14 @@
3636
</lay-date-picker>
3737

3838

39+
<lay-date-picker
40+
v-model="value7"
41+
format="YYYY年MM月DD日"
42+
min="2019-3-10"
43+
max="2019-8-10"
44+
placeholder="限制时间">
45+
</lay-date-picker>
46+
3947

4048
<script>
4149
export default {
@@ -48,6 +56,7 @@ export default {
4856
value4: '',
4957
value5: '',
5058
value6: '',
59+
value7: '',
5160
importantDays: {
5261
'1-10': '测试',
5362
'2-11': '测试',

0 commit comments

Comments
 (0)