Skip to content

Commit fd26136

Browse files
kouchaokouchao
committed
refactor: 完善日期选择器
1 parent 64e9745 commit fd26136

File tree

8 files changed

+155
-120
lines changed

8 files changed

+155
-120
lines changed

‎examples/doc/views/DatePicker.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,18 @@
4444
placeholder="限制时间">
4545
</lay-date-picker>
4646

47+
<lay-date-picker
48+
v-model="value7"
49+
theme="molv"
50+
placeholder="墨绿">
51+
</lay-date-picker>
52+
53+
<lay-date-picker
54+
v-model="value7"
55+
theme="grid"
56+
placeholder="墨绿">
57+
</lay-date-picker>
58+
4759

4860
<script>
4961
export default {

‎src/assets/layui.css

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5023,4 +5023,7 @@ body .layui-util-face .layui-layer-content {
50235023
animation-name: layui-fadeout
50245024
}
50255025

5026-
/* dl 重写 */
5026+
/* 日期 */
5027+
.layui-laydate.lay-date-picker {
5028+
animation-name: none;
5029+
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
- [x] 公历节日
99
- [x] 自定义重要日子
1010
- [x] 限制可选日期
11-
- [ ] 多种款色任你挑选
12-
- [ ] 多种事件供你使用
11+
- [x] 多种款色任你挑选
12+
- [x] 多种事件供你使用
1313
- [ ] 时间选择器
1414
- [ ] 自定义时间格式
1515
- [ ] 限制可选时间

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

Lines changed: 76 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<template>
2-
<div :class="['lay-date-picker', $parent.block ? 'layui-input-block' : 'layui-input-inline']">
2+
<div
3+
ref="reference"
4+
:class="['lay-date-picker', $parent.block ? 'layui-input-block' : 'layui-input-inline']"
5+
>
36
<input
47
ref="input"
58
:name="name"
@@ -10,21 +13,42 @@
1013
:class="{
1114
'layui-radio-disbaled layui-disabled': disabled
1215
}"
13-
@click="handeleFocus"
16+
@focus="handeleFocus"
1417
@change="handleChange"
18+
@blur="handleHide"
19+
@click="handleClick"
1520
>
21+
<Main
22+
v-if="isOpen"
23+
ref="popper"
24+
:theme="theme"
25+
:type="type"
26+
:format="format"
27+
:festival="festival"
28+
:important-days="importantDays"
29+
:min="min"
30+
:max="max"
31+
@change="emitChange"
32+
@init="handleInit"
33+
@select="handleSelect"
34+
@close="handleHide"
35+
@stop="handleStop"
36+
/>
1637
</div>
1738
</template>
1839

1940
<script>
2041
21-
import Toast from './toast';
2242
import Main from './main';
23-
import Vue from 'vue';
2443
import { oneOf } from '@/utils/validatorProps';
44+
import Popper from '@/mixins/popper';
2545
2646
export default {
2747
name: 'LayDatePicker',
48+
components: {
49+
Main
50+
},
51+
mixins: [Popper],
2852
props: {
2953
value: {
3054
type: [String, Number],
@@ -68,43 +92,42 @@ export default {
6892
max: {
6993
type: [String, Number],
7094
default: ''
95+
},
96+
theme: {
97+
type: String,
98+
default: 'default',
99+
validator (value) {
100+
return oneOf('theme', ['default', 'molv', 'grid'], value);
101+
}
71102
}
72103
},
104+
data () {
105+
return {
106+
isOpen: false,
107+
isFocus: false
108+
};
109+
},
73110
destroyed () {
74111
this.handleHide();
75112
},
76113
methods: {
77114
handeleFocus () {
78-
document.addEventListener('click', this.handleHide);
79-
if (this.picker) {
80-
this.picker.showToast(() => {
81-
this.picker.$el.appendChild(this.main.$el);
82-
});
83-
return false;
84-
}
85-
this.picker = Toast();
86-
this.picker.elem = this.$refs.input;
87-
this.main = new Vue(Main);
88-
this.main.$props.type = this.type;
89-
this.main.$props.format = this.format;
90-
this.main.$props.festival = this.festival;
91-
this.main.$props.importantDays = this.importantDays;
92-
this.main.$props.min = this.min;
93-
this.main.$props.max = this.max;
94-
this.main.$mount();
95-
this.main.$on('change', this.emitChange);
96-
this.main.$on('close', () => {
97-
this.handleHide();
115+
this.isOpen = true;
116+
this.isFocus = true;
117+
this.$nextTick(() => {
118+
this.createPopper();
98119
});
99120
100-
this.picker.showToast(() => {
101-
this.picker.$el.appendChild(this.main.$el);
102-
});
103121
},
104-
handleHide (e) {
105-
if (!e || !e.path.find(o => o.className && o.className.includes('lay-date-picker'))) {
106-
document.removeEventListener('click', this.handleHide);
107-
this.picker.show = false;
122+
handleHide () {
123+
124+
if (this.stop == true) {
125+
const input = this.$refs.input;
126+
input.focus();
127+
this.stop = false;
128+
} else {
129+
this.destroyPopper();
130+
this.isOpen = false;
108131
}
109132
},
110133
handleChange () {
@@ -114,8 +137,30 @@ export default {
114137
this.$emit('input', this.number ? parseInt(value) || 0 : value);
115138
}
116139
},
140+
141+
handleStop () {
142+
this.stop = true;
143+
},
144+
145+
handleClick () {
146+
if (this.isFocus && !this.isOpen) {
147+
this.isOpen = true;
148+
}
149+
},
150+
117151
emitChange (val) {
118152
this.$emit('input', val);
153+
},
154+
155+
handleInit (val) {
156+
// 日期框打开的时候
157+
this.$emit('open', val);
158+
},
159+
160+
handleSelect (val) {
161+
// 日期切换的时候
162+
this.$emit('select', val);
163+
console.log(val);
119164
}
120165
}
121166
};

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

Lines changed: 48 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
<template>
2-
<div>
2+
<div
3+
ref="popper"
4+
class="layui-laydate lay-date-picker"
5+
:class="[
6+
'layui-laydate',
7+
'lay-date-picker',
8+
`laydate-theme-${theme}`
9+
]"
10+
@mousedown="handelMousedown"
11+
>
312
<div class="layui-laydate-main laydate-main-list-0">
413
<picker-header
514
v-model="selectedType"
@@ -89,6 +98,10 @@ export default {
8998
return oneOf('type', ['year', 'month', 'date'], value);
9099
}
91100
},
101+
value: {
102+
type: String,
103+
default: ''
104+
},
92105
format: {
93106
type: String,
94107
default: ''
@@ -105,7 +118,15 @@ export default {
105118
max: {
106119
type: [String, Number],
107120
default: ''
121+
},
122+
theme: {
123+
type: String,
124+
default: 'default',
125+
validator (value) {
126+
return oneOf('theme', ['default', 'molv', 'grid'], value);
127+
}
108128
}
129+
109130
},
110131
data () {
111132
return {
@@ -122,23 +143,32 @@ export default {
122143
},
123144
created () {
124145
this.selectedType = this.type;
125-
// // 测试当前时间
146+
126147
const date = new Date();
148+
127149
this.handerYearTableChange(date.getFullYear());
128150
this.handerMonthTableChange(date.getMonth());
129151
this.handerDateTableChange(date.getDate());
152+
this._val = this.getVal();
153+
this.$emit('init', this._val);
130154
},
131155
methods: {
132156
handerDateTableChange (day) {
133157
this.selectedDay = day;
158+
this.$nextTick(() => {
159+
if (this._val !== this.getVal()) {
160+
this._val = this.getVal();
161+
this.$emit('select', this._val);
162+
}
163+
});
134164
},
135165
handerMonthTableChange (month, isHeaderChange) {
136166
this.selectedMonth = month;
137167
if (!isHeaderChange) {
138168
this.selectedType = this.type;
139169
}
140170
141-
let _day = this.checkDay();
171+
const _day = this.checkDay();
142172
this.handerDateTableChange(_day);
143173
},
144174
handerYearTableChange (year, isHeaderChange) {
@@ -147,9 +177,8 @@ export default {
147177
this.selectedType = this.type;
148178
}
149179
150-
let _day = this.checkDay();
180+
const _day = this.checkDay();
151181
this.handerDateTableChange(_day);
152-
153182
},
154183
checkDay (year = this.selectedYear, month = this.selectedMonth, day = this.selectedDay) {
155184
const daysInMonth = getDaysInMonth(year, month);
@@ -184,11 +213,11 @@ export default {
184213
this.handerMonthTableChange(_month, true);
185214
},
186215
handlePrevYear () {
187-
let _year = this.selectedType == 'year' ? this.selectedYear - 15 : this.selectedYear - 1;
216+
const _year = this.selectedType == 'year' ? this.selectedYear - 15 : this.selectedYear - 1;
188217
this.handerYearTableChange(_year, true);
189218
},
190219
handleNextYear () {
191-
let _year = this.selectedType == 'year' ? this.selectedYear + 15 : this.selectedYear + 1;
220+
const _year = this.selectedType == 'year' ? this.selectedYear + 15 : this.selectedYear + 1;
192221
this.handerYearTableChange(_year, true);
193222
},
194223
handelClear () {
@@ -205,7 +234,12 @@ export default {
205234
this.selectedType = this.type;
206235
this.emitChange();
207236
},
208-
emitChange (isClear) {
237+
238+
handelMousedown () {
239+
this.$emit('stop');
240+
},
241+
242+
getVal () {
209243
let date = dayjs(`${this.selectedYear}-${this.selectedMonth + 1}-${this.selectedDay}`);
210244
211245
if (this.min && date.isBefore(dayjs(this.min))) {
@@ -233,6 +267,12 @@ export default {
233267
val = date.format(this.format);
234268
}
235269
270+
return val;
271+
},
272+
273+
emitChange (isClear) {
274+
275+
const val = this.getVal();
236276
this.$emit('change', isClear ? '' : val);
237277
this.$emit('close');
238278
}

‎src/components/date-picker/src/toast/index.js

Lines changed: 0 additions & 9 deletions
This file was deleted.

0 commit comments

Comments
 (0)