Skip to content

Commit 6ec7536

Browse files
zepangzepang
committed
添加日期选择器文档
1 parent 9636fa1 commit 6ec7536

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+1295
-142
lines changed

‎docs/.vuepress/components/date-demo.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div>
3+
<p>{{time}}</p>
4+
<div style="width: 300px; margin-top: 20px; display: inline-block">
5+
<lai-date-picker v-model="time" format="YYYY-MM-DD" type="dateRange" @change="handleChange"></lai-date-picker>
6+
</div>
7+
</div>
8+
</template>
9+
<script>
10+
import LaiDatePicker from './date'
11+
import LaiButton from './lai-button'
12+
export default {
13+
components: { LaiDatePicker, LaiButton },
14+
data () {
15+
return {
16+
time: [new Date(), new Date()]
17+
}
18+
},
19+
methods: {
20+
handleChange (val) {
21+
console.log('app:', val)
22+
}
23+
}
24+
}
25+
</script>

‎docs/.vuepress/components/date/RangeDatePicker.vue‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
<template>
2+
<popover ref="popover">
3+
<div slot="reference" class="date-picker__input" :style="{borderRadius: picker.radius}" >
4+
<span class="date-icon">
5+
<i class="iconfont icon-date-empty"></i>
6+
</span>
7+
<div class="input-group">
8+
<input
9+
:value="picker.time[0]"
10+
placeholder="请选择日期"
11+
@blur="handleBlur"
12+
type="text" >
13+
<span class="range-separator">{{picker.rangeSeparator}}</span>
14+
<input
15+
:value="picker.time[1]"
16+
placeholder="请选择日期"
17+
type="text" >
18+
</div>
19+
<span v-if="picker.clearable && picker.time.length === 2" class="error-icon" @click.stop="clearTime">
20+
<i class="iconfont icon-error"></i>
21+
</span>
22+
</div>
23+
<table-date-panel
24+
v-if="picker.singleCalendar"
25+
slot="content"
26+
ref="tableDatePanel"
27+
v-model="calendarDate"></table-date-panel>
28+
<div class="calendar-list_wrapper" v-else slot="content">
29+
<ul class="calendar-list" >
30+
<li class="calendar-panel" v-for="(item, index) in calendarDate" :key="index">
31+
<table-date-panel
32+
ref="tableDatePanel"
33+
v-model="calendarDate[index]"></table-date-panel>
34+
</li>
35+
</ul>
36+
</div>
37+
</popover>
38+
</template>
39+
40+
<script>
41+
import dayjs from 'dayjs'
42+
import Popover from '../popover'
43+
import TableDatePanel from './TableDatePanel'
44+
export default {
45+
name: 'RangeDatePicker',
46+
inject: ['picker'],
47+
data () {
48+
return {
49+
calendarDate: dayjs(),
50+
isShow: false,
51+
dayjs: dayjs,
52+
// 存储日历的时间列表
53+
calendar: []
54+
}
55+
},
56+
created () {
57+
if (this.picker.singleCalendar) {
58+
this.calendarDate = dayjs()
59+
} else {
60+
this.calendarDate = [dayjs(), dayjs().add(1, 'month')]
61+
}
62+
},
63+
components: {
64+
Popover,
65+
TableDatePanel
66+
},
67+
methods: {
68+
handleBlur (e) {
69+
console.log(e.target.value);
70+
},
71+
clearTime () {
72+
this.picker.time = []
73+
this.$nextTick(() => {
74+
this.$refs.tableDatePanel.resetRangeDateCalendar()
75+
})
76+
this.picker.hide()
77+
}
78+
}
79+
}
80+
</script>
81+
<style lang="less" scoped>
82+
.date-picker__input {
83+
position: relative;
84+
width: 100%;
85+
min-width: 260px !important;
86+
box-shadow: 0px 0px 1px 0px #999999;
87+
font-size: 14px;
88+
cursor: default;
89+
user-select: none;
90+
&:focus {
91+
outline: none;
92+
box-shadow: 0px 0px 1px 0px #535ef5 ;
93+
}
94+
&:hover {
95+
box-shadow: 0px 0px 1px 0px #535ef5 ;
96+
}
97+
&:hover {
98+
.error-icon {
99+
display: inline-block;
100+
}
101+
}
102+
.date-icon, .error-icon, {
103+
display: inline-block;
104+
position: absolute;
105+
top: 50%;
106+
transform: translateY(-50%);
107+
i {
108+
color: #999999;
109+
}
110+
}
111+
.date-icon{
112+
left: 10px;
113+
i {
114+
font-size: 20px;
115+
}
116+
}
117+
.error-icon {
118+
display: none;
119+
right: 10px;
120+
}
121+
.input-group {
122+
box-sizing: border-box;
123+
margin: 0 40px;
124+
font-size: 0;
125+
.range-separator {
126+
display: inline-block;
127+
min-width: 7px;
128+
vertical-align: top;
129+
width: 4%;
130+
line-height: 1;
131+
padding: 11px 0;
132+
font-size: 14px;
133+
}
134+
input {
135+
display: inline-block;
136+
width: 48%;
137+
min-width: 80px;
138+
border: 0;
139+
line-height: 1;
140+
padding: 11px 0;
141+
font-size: 14px;
142+
text-align: center;
143+
box-sizing: border-box;
144+
cursor: default;
145+
&:focus {
146+
outline: none;
147+
}
148+
}
149+
}
150+
}
151+
152+
.calendar-list__wrapper {
153+
position: relative;
154+
}
155+
156+
.calendar-list {
157+
width: 200%;
158+
position: absolute;
159+
margin: 0;
160+
padding: 0;
161+
box-shadow: 0px 1px 10px 0px rgba(22, 24, 39, 0.08);
162+
.calendar-panel {
163+
width: 50%;
164+
display: inline-block;
165+
list-style: none;
166+
}
167+
}
168+
</style>
169+

‎docs/.vuepress/components/date/SingleDatePicker.vue‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
<template>
2+
<popover width="200px" ref="popover">
3+
<div class="date-picker__input" :style="{borderRadius: picker.radius}" slot="reference">
4+
<span class="date-icon">
5+
<i class="iconfont icon-date-empty"></i>
6+
</span>
7+
<div class="input-group">
8+
<input
9+
v-model="picker.time"
10+
placeholder="请选择日期"
11+
type="text" readonly>
12+
</div>
13+
<span v-if="picker.clearable && picker.time" class="error-icon" @click.stop="clearTime">
14+
<i class="iconfont icon-error"></i>
15+
</span>
16+
</div>
17+
<table-date-panel
18+
slot="content"
19+
ref="tableDatePanel"
20+
v-model="calendarDate"></table-date-panel>
21+
</popover>
22+
</template>
23+
24+
<script>
25+
import dayjs from 'dayjs'
26+
import Popover from '../popover'
27+
import TableDatePanel from './TableDatePanel'
28+
export default {
29+
name: 'SingleDatePicker',
30+
inject: ['picker'],
31+
provide () {
32+
return { popover: this.$refs.popover }
33+
},
34+
data () {
35+
return {
36+
calendarDate: dayjs(),
37+
isShow: false,
38+
selectedDate: null,
39+
dayjs: dayjs,
40+
calendar: []
41+
}
42+
},
43+
components: {
44+
Popover,
45+
TableDatePanel
46+
},
47+
methods: {
48+
clearTime () {
49+
this.picker.time = null
50+
this.$nextTick(() => {
51+
this.$refs.tableDatePanel.resetRangeDateCalendar()
52+
})
53+
this.picker.hide()
54+
}
55+
}
56+
}
57+
</script>
58+
59+
<style lang="less" scoped>
60+
.date-picker__input {
61+
position: relative;
62+
width: 100%;
63+
box-shadow: 0px 0px 1px 0px #999999;
64+
font-size: 14px;
65+
cursor: default;
66+
&:focus {
67+
outline: none;
68+
box-shadow: 0px 0px 1px 0px #535ef5 ;
69+
}
70+
&:hover {
71+
box-shadow: 0px 0px 1px 0px #535ef5 ;
72+
}
73+
&:hover {
74+
.error-icon {
75+
display: inline-block;
76+
}
77+
}
78+
.date-icon, .error-icon, {
79+
display: inline-block;
80+
position: absolute;
81+
top: 50%;
82+
transform: translateY(-50%);
83+
i {
84+
color: #999999;
85+
}
86+
}
87+
.date-icon{
88+
left: 10px;
89+
i {
90+
font-size: 20px;
91+
}
92+
}
93+
.error-icon {
94+
display: none;
95+
right: 10px;
96+
}
97+
.input-group {
98+
box-sizing: border-box;
99+
margin: 0 40px;
100+
font-size: 0;
101+
input {
102+
display: inline-block;
103+
width: 100%;
104+
min-width: 80px;
105+
border: 0;
106+
line-height: 1;
107+
padding: 11px 0;
108+
font-size: 14px;
109+
text-align: center;
110+
box-sizing: border-box;
111+
cursor: default;
112+
&:focus {
113+
outline: none;
114+
}
115+
}
116+
}
117+
}
118+
119+
.base-calendar__wrapper {
120+
// width: 280px;
121+
padding: 10px;
122+
box-sizing: border-box;
123+
box-shadow: 0px 1px 10px 0px rgba(22, 24, 39, 0.08);
124+
font-size: 0;
125+
user-select: none;
126+
.calendar-title__wrapper {
127+
width: 100%;
128+
position: relative;
129+
.prev, .next {
130+
position: absolute;
131+
top: 0;
132+
cursor: pointer;
133+
}
134+
.prev {
135+
left: 0;
136+
}
137+
.next {
138+
right: 0;
139+
}
140+
.calendar-title {
141+
font-size: 16px;
142+
line-height: 1;
143+
font-weight: 600;
144+
text-align: center;
145+
}
146+
}
147+
table {
148+
width: 100%;
149+
thead {
150+
th {
151+
padding: 10px;
152+
font-size: 14px;
153+
}
154+
}
155+
tbody {
156+
tr {
157+
td {
158+
padding: 3%;
159+
font-size: 14px;
160+
font-weight: 600;
161+
text-align: center;
162+
cursor: pointer;
163+
&.selected {
164+
border-radius: 50%;
165+
background-color: #535ef5;
166+
color: #ffffff;
167+
}
168+
&.disabled {
169+
color: #c4c1c1;
170+
}
171+
&:not(.disabled):not(.selected):hover {
172+
background-color: #eeeeee;
173+
}
174+
&.disabled:hover {
175+
cursor: not-allowed;
176+
}
177+
}
178+
}
179+
}
180+
}
181+
}
182+
183+
</style>
184+
185+
186+

0 commit comments

Comments
 (0)