Skip to content

Commit 433b80d

Browse files
kouchaokouchao
committed
feat: 新增 日期选择器
1 parent 965d9d3 commit 433b80d

File tree

18 files changed

+677
-1
lines changed

18 files changed

+677
-1
lines changed

‎src/App.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,10 @@
9696
title="弹出层"
9797
:to="{ name: 'layer' }"
9898
/>
99+
<lay-menu-child-item
100+
title="日期与时间选择"
101+
:to="{ name: 'datePicker' }"
102+
/>
99103
<lay-menu-child-item
100104
title="分页"
101105
:to="{ name: 'laypage' }"

‎src/assets/lay-date/font/iconfont.eot

2.4 KB
Binary file not shown.

‎src/assets/lay-date/font/iconfont.svg

Lines changed: 45 additions & 0 deletions
Loading

‎src/assets/lay-date/font/iconfont.ttf

2.22 KB
Binary file not shown.

‎src/assets/lay-date/font/iconfont.woff

1.46 KB
Binary file not shown.

‎src/assets/lay-date/laydate.css

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import DatePicker from './src/date-picker';
2+
3+
/* istanbul ignore next */
4+
DatePicker.install = function (Vue) {
5+
Vue.component(DatePicker.name, DatePicker);
6+
};
7+
8+
export default DatePicker;

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

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<template>
2+
<div class="layui-laydate-content">
3+
<table>
4+
<thead>
5+
<tr>
6+
<th>日</th>
7+
<th>一</th>
8+
<th>二</th>
9+
<th>三</th>
10+
<th>四</th>
11+
<th>五</th>
12+
<th>六</th>
13+
</tr>
14+
</thead>
15+
<tbody>
16+
<tr
17+
v-for="week in days"
18+
:key="`tr/${week[0].key}`"
19+
>
20+
<td
21+
v-for="date in week"
22+
:key="`td/${date.key}`"
23+
:class="{
24+
'laydate-day-prev': isPrev(date),
25+
'laydate-day-next': date.month > month,
26+
'layui-this': isday(date)
27+
}"
28+
@click="emitChange(date)"
29+
>
30+
{{ date.day }}
31+
</td>
32+
</tr>
33+
</tbody>
34+
</table>
35+
</div>
36+
</template>
37+
<script>
38+
import { getDay, getDaysInMonth, getPrevDaysInMonth } from '../utils';
39+
40+
export default {
41+
name: 'DateContent',
42+
props: {
43+
year: {
44+
type: Number,
45+
required: true
46+
},
47+
month: {
48+
type: Number,
49+
required: true
50+
},
51+
day: {
52+
type: Number,
53+
required: true
54+
}
55+
},
56+
data () {
57+
return {
58+
days: []
59+
};
60+
},
61+
watch: {
62+
year () {
63+
this.updateDay();
64+
},
65+
month () {
66+
this.updateDay();
67+
},
68+
day () {
69+
this.updateDay();
70+
}
71+
},
72+
mounted () {
73+
this.updateDay();
74+
},
75+
methods: {
76+
updateDay () {
77+
if (!this.year || !this.day) {
78+
return false;
79+
}
80+
const firstDay = getDay(this.year, this.month);
81+
82+
// 这个月份共多少天
83+
const daysInMonth = getDaysInMonth(this.year, this.month);
84+
// 上月份共多少天
85+
const prevDaysInMonth = getPrevDaysInMonth(this.year, this.month);
86+
87+
let _days = [];
88+
for (let i = 0; i < 42; i++) {
89+
if (i % 7 == 0) {
90+
_days.push([]);
91+
}
92+
93+
const isPrevDay = i < firstDay;
94+
const isNextDay = i > daysInMonth + firstDay - 1;
95+
96+
let _year = this.year;
97+
let _month = this.month;
98+
let _day = i - firstDay + 1;
99+
100+
if (isPrevDay) {
101+
if (_month == 0) {
102+
_month = 11;
103+
_year = _year - 1;
104+
} else {
105+
_month = _month - 1;
106+
}
107+
_day = prevDaysInMonth - firstDay + i + 1;
108+
} else if (isNextDay) {
109+
if (_month == 11) {
110+
_month = 0;
111+
_year = _year + 1;
112+
} else {
113+
_month = _month + 1;
114+
}
115+
_day = i - daysInMonth - firstDay + 1;
116+
}
117+
118+
_days[parseInt(i / 7)].push({
119+
year: _year,
120+
month: _month,
121+
day: _day,
122+
key: `${_year}/${_month + 1}/${_day}`
123+
});
124+
125+
}
126+
this.days = _days;
127+
},
128+
// 判断是不是当前日期
129+
isday (date) {
130+
return date.year == this.year && date.month == this.month && date.day == this.day;
131+
},
132+
// 判断是不是前一个月
133+
isPrev (date) {
134+
return date.month < this.month || date.year < this.year;
135+
},
136+
emitChange (date) {
137+
this.$emit('change', {
138+
year: date.year,
139+
month: date.month,
140+
day: date.day
141+
});
142+
}
143+
}
144+
};
145+
</script>

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

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<template>
2+
<div :class="$parent.block ? 'layui-input-block' : 'layui-input-inline'">
3+
<input
4+
ref="input"
5+
:name="name"
6+
:placeholder="placeholder"
7+
class="layui-input"
8+
:value="value"
9+
:disabled="disabled"
10+
:class="{
11+
'layui-radio-disbaled layui-disabled': disabled
12+
}"
13+
@focus="handeleFocus"
14+
@blur="handeleBlur"
15+
@change="handleChange"
16+
>
17+
</div>
18+
</template>
19+
20+
<script>
21+
22+
import Toast from './toast';
23+
import Main from './main';
24+
import Vue from 'vue';
25+
26+
export default {
27+
name: 'LayDatePicker',
28+
props: {
29+
value: {
30+
type: [String, Number],
31+
default: ''
32+
},
33+
placeholder: {
34+
type: String,
35+
default: ''
36+
},
37+
disabled: Boolean,
38+
name: {
39+
type: String,
40+
default: ''
41+
},
42+
required: Boolean,
43+
width: {
44+
type: Number,
45+
default: 0
46+
},
47+
number: Boolean
48+
},
49+
data () {
50+
return {};
51+
},
52+
methods: {
53+
handeleFocus () {
54+
if (this.picker) {
55+
this.picker.showToast(() => {
56+
this.picker.$el.appendChild(this.main.$el);
57+
});
58+
return false;
59+
}
60+
this.picker = Toast();
61+
this.picker.elem = this.$refs.input;
62+
this.main = new Vue(Main);
63+
this.main.$mount();
64+
this.main.$on('change', this.emitChange);
65+
this.main.$on('close', () => {
66+
this.picker.show = false;
67+
});
68+
69+
this.picker.showToast(() => {
70+
this.picker.$el.appendChild(this.main.$el);
71+
});
72+
},
73+
handeleBlur () {
74+
// this.picker.show = false;
75+
},
76+
handleChange () {
77+
if (!this.disabled) {
78+
const value = event.target.value;
79+
80+
this.$emit('input', this.number ? parseInt(value) || 0 : value);
81+
}
82+
},
83+
emitChange (val) {
84+
this.$emit('input', val);
85+
}
86+
}
87+
};
88+
</script>
89+
90+
<style>
91+
</style>

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

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<template>
2+
<div class="layui-laydate-header">
3+
<i
4+
class="layui-icon laydate-icon laydate-prev-y"
5+
@click="emitPrevYear"
6+
></i>
7+
<i
8+
class="layui-icon laydate-icon laydate-prev-m"
9+
@click="emitPrevMonth"
10+
></i>
11+
<div class="laydate-set-ym">
12+
<span
13+
v-if="year"
14+
@click="emitSelectYear"
15+
>{{ year }}</span>
16+
<span
17+
v-if="month"
18+
@click="emitSelectMonth"
19+
>{{ month }}</span>
20+
</div>
21+
<i
22+
class="layui-icon laydate-icon laydate-next-m"
23+
@click="emitNextMonth"
24+
></i>
25+
<i
26+
class="layui-icon laydate-icon laydate-next-y"
27+
@click="emitNextYear"
28+
></i>
29+
</div>
30+
</template>
31+
<script>
32+
export default {
33+
name: 'PickerHeader',
34+
props: {
35+
year: {
36+
type: String,
37+
default: ''
38+
},
39+
month: {
40+
type: String,
41+
default: ''
42+
}
43+
},
44+
methods: {
45+
emitPrevMonth () {
46+
this.$emit('prevMonth');
47+
},
48+
emitNextMonth () {
49+
this.$emit('nextMonth');
50+
},
51+
emitPrevYear () {
52+
this.$emit('prevYear');
53+
},
54+
emitNextYear () {
55+
this.$emit('nextYear');
56+
},
57+
emitSelectMonth () {
58+
this.$emit('selectMonth');
59+
},
60+
emitSelectYear () {
61+
this.$emit('selectYear');
62+
}
63+
}
64+
};
65+
</script>

0 commit comments

Comments
 (0)