Skip to content

Commit 5dbe756

Browse files
mehaotianmehaotian
committed
fix(uni-ui): uni-calendar 组件 新增快捷选择年月，优化如果不是今天的日期，修改date不在显示今天 ，多选开始和结束日期高亮。修复动态修改开始结束日期不渲染的Bug ， 无法滚动的Bug 高亮开始
1 parent bebb2c6 commit 5dbe756

File tree

33 files changed

+192
-73
lines changed

33 files changed

+192
-73
lines changed

‎components/uni-calendar/uni-calendar-item.vue

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,36 +3,46 @@
33
'uni-calendar-item--disable':weeks.disable,
44
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
55
'uni-calendar-item--checked':(calendar.fullDate === weeks.fullDate && !weeks.isDay) ,
6-
'uni-calendar-item--multiple': weeks.multiple
6+
'uni-calendar-item--before-checked':weeks.beforeMultiple,
7+
'uni-calendar-item--multiple': weeks.multiple,
8+
'uni-calendar-item--after-checked':weeks.afterMultiple,
79
}" @click="choiceDate(weeks)">
810
<view class="uni-calendar-item__weeks-box-item">
911
<text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
1012
<text class="uni-calendar-item__weeks-box-text" :class="{
1113
'uni-calendar-item--isDay-text': weeks.isDay,
1214
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
1315
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
16+
'uni-calendar-item--before-checked':weeks.beforeMultiple,
1417
'uni-calendar-item--multiple': weeks.multiple,
18+
'uni-calendar-item--after-checked':weeks.afterMultiple,
1519
'uni-calendar-item--disable':weeks.disable,
1620
}">{{weeks.date}}</text>
1721
<text v-if="!lunar&&!weeks.extraInfo && weeks.isDay" class="uni-calendar-item__weeks-lunar-text" :class="{
1822
'uni-calendar-item--isDay-text':weeks.isDay,
1923
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
2024
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
25+
'uni-calendar-item--before-checked':weeks.beforeMultiple,
2126
'uni-calendar-item--multiple': weeks.multiple,
27+
'uni-calendar-item--after-checked':weeks.afterMultiple,
2228
}">今天</text>
2329
<text v-if="lunar&&!weeks.extraInfo" class="uni-calendar-item__weeks-lunar-text" :class="{
2430
'uni-calendar-item--isDay-text':weeks.isDay,
2531
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
2632
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
33+
'uni-calendar-item--before-checked':weeks.beforeMultiple,
2734
'uni-calendar-item--multiple': weeks.multiple,
35+
'uni-calendar-item--after-checked':weeks.afterMultiple,
2836
'uni-calendar-item--disable':weeks.disable,
2937
}">{{weeks.isDay?'今天': (weeks.lunar.IDayCn === '初一'?weeks.lunar.IMonthCn:weeks.lunar.IDayCn)}}</text>
3038
<text v-if="weeks.extraInfo&&weeks.extraInfo.info" class="uni-calendar-item__weeks-lunar-text" :class="{
3139
'uni-calendar-item--extra':weeks.extraInfo.info,
3240
'uni-calendar-item--isDay-text':weeks.isDay,
3341
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
3442
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
43+
'uni-calendar-item--before-checked':weeks.beforeMultiple,
3544
'uni-calendar-item--multiple': weeks.multiple,
45+
'uni-calendar-item--after-checked':weeks.afterMultiple,
3646
'uni-calendar-item--disable':weeks.disable,
3747
}">{{weeks.extraInfo.info}}</text>
3848
</view>
@@ -148,4 +158,14 @@
148158
color: #fff;
149159
opacity: 0.8;
150160
}
161+
162+
.uni-calendar-item--before-checked {
163+
background-color: #ff5a5f;
164+
color: #fff;
165+
}
166+
167+
.uni-calendar-item--after-checked {
168+
background-color: #ff5a5f;
169+
color: #fff;
170+
}
151171
</style>

‎components/uni-calendar/uni-calendar.vue

Lines changed: 84 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<view class="uni-calendar" @touchmove.stop.prevent="clean">
2+
<view class="uni-calendar">
33
<view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}" @click="clean"></view>
44
<view v-if="insert || show" class="uni-calendar__content" :class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow}">
55
<view v-if="!insert" class="uni-calendar__header uni-calendar--fixed-top">
@@ -11,14 +11,17 @@
1111
</view>
1212
</view>
1313
<view class="uni-calendar__header">
14-
<view class="uni-calendar__header-btn-box" @click="pre">
14+
<view class="uni-calendar__header-btn-box" @click.stop="pre">
1515
<view class="uni-calendar__header-btn uni-calendar--left"></view>
1616
</view>
17-
<text class="uni-calendar__header-text">{{ (nowDate.year||'') +'年'+( nowDate.month||'') +'月'}}</text>
18-
<view class="uni-calendar__header-btn-box" @click="next">
17+
<picker mode="date" :value="date" fields="month" @change="bindDateChange">
18+
<text class="uni-calendar__header-text">{{ (nowDate.year||'') +'年'+( nowDate.month||'') +'月'}}</text>
19+
</picker>
20+
<view class="uni-calendar__header-btn-box" @click.stop="next">
1921
<view class="uni-calendar__header-btn uni-calendar--right"></view>
2022
</view>
2123
<text class="uni-calendar__backtoday" @click="backtoday">回到今天</text>
24+
2225
</view>
2326
<view class="uni-calendar__box">
2427
<view v-if="showMonth" class="uni-calendar__box-bg">
@@ -72,6 +75,7 @@
7275
* @property {Boolean} insert = [true|false] 插入模式,默认为false
7376
* @value true 弹窗模式
7477
* @value false 插入模式
78+
* @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容
7579
* @property {Array} selected 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
7680
* @property {Boolean} showMonth 是否选择月份为背景
7781
* @event {Function} change 日期改变，`insert :ture` 时生效
@@ -117,6 +121,10 @@
117121
showMonth: {
118122
type: Boolean,
119123
default: true
124+
},
125+
clearDate: {
126+
type: Boolean,
127+
default: true
120128
}
121129
},
122130
data() {
@@ -129,6 +137,16 @@
129137
}
130138
},
131139
watch: {
140+
date(newVal) {
141+
this.cale.setDate(newVal)
142+
this.init(this.cale.selectDate.fullDate)
143+
},
144+
startDate(val) {
145+
this.cale.resetSatrtDate(val)
146+
},
147+
endDate(val) {
148+
this.cale.resetEndDate(val)
149+
},
132150
selected(newVal) {
133151
this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
134152
this.weeks = this.cale.weeks
@@ -137,45 +155,80 @@
137155
created() {
138156
// 获取日历方法实例
139157
this.cale = new Calendar({
140-
date: this.date,
158+
// date: new Date(),
141159
selected: this.selected,
142160
startDate: this.startDate,
143161
endDate: this.endDate,
144162
range: this.range,
145163
})
146-
this.init(this.cale.date.fullDate)
164+
// 选中某一天
165+
this.cale.setDate(this.date)
166+
this.init(this.cale.selectDate.fullDate)
167+
// this.setDay
147168
},
148169
methods: {
149170
// 取消穿透
150171
clean() {},
172+
bindDateChange(e) {
173+
const value = e.detail.value + '-1'
174+
console.log(this.cale.getDate(value));
175+
this.cale.setDate(value)
176+
this.init(value)
177+
},
178+
/**
179+
* 初始化日期显示
180+
* @param {Object} date
181+
*/
151182
init(date) {
152183
this.weeks = this.cale.weeks
153184
this.nowDate = this.calendar = this.cale.getInfo(date)
154185
},
186+
/**
187+
* 打开日历弹窗
188+
*/
155189
open() {
190+
// 弹窗模式并且清理数据
191+
if (this.clearDate && !this.insert) {
192+
this.cale.cleanMultipleStatus()
193+
this.cale.setDate(this.date)
194+
this.init(this.cale.selectDate.fullDate)
195+
}
156196
this.show = true
157197
this.$nextTick(() => {
158198
setTimeout(() => {
159199
this.aniMaskShow = true
160200
}, 50)
161201
})
162202
},
203+
/**
204+
* 关闭日历弹窗
205+
*/
163206
close() {
164207
this.aniMaskShow = false
165208
this.$nextTick(() => {
166209
setTimeout(() => {
167210
this.show = false
211+
this.$emit('close')
168212
}, 300)
169213
})
170214
},
215+
/**
216+
* 确认按钮
217+
*/
171218
confirm() {
172219
this.setEmit('confirm')
173220
this.close()
174221
},
222+
/**
223+
* 变化触发
224+
*/
175225
change() {
176226
if (!this.insert) return
177227
this.setEmit('change')
178228
},
229+
/**
230+
* 选择月份触发
231+
*/
179232
monthSwitch() {
180233
let {
181234
year,
@@ -186,6 +239,10 @@
186239
month: Number(month)
187240
})
188241
},
242+
/**
243+
* 派发事件
244+
* @param {Object} name
245+
*/
189246
setEmit(name) {
190247
let {
191248
year,
@@ -205,6 +262,10 @@
205262
extraInfo: extraInfo || {}
206263
})
207264
},
265+
/**
266+
* 选择天触发
267+
* @param {Object} weeks
268+
*/
208269
choiceDate(weeks) {
209270
if (weeks.disable) return
210271
this.calendar = weeks
@@ -213,23 +274,37 @@
213274
this.weeks = this.cale.weeks
214275
this.change()
215276
},
277+
/**
278+
* 回到今天
279+
*/
216280
backtoday() {
217-
this.cale.setDate(this.date)
218-
this.weeks = this.cale.weeks
219-
this.nowDate = this.calendar = this.cale.getInfo(this.date)
281+
console.log(this.cale.getDate(new Date()).fullDate);
282+
let date = this.cale.getDate(new Date()).fullDate
283+
this.cale.setDate(date)
284+
this.init(date)
220285
this.change()
221286
},
287+
/**
288+
* 上个月
289+
*/
222290
pre() {
223291
const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
224292
this.setDate(preDate)
225293
this.monthSwitch()
226294
227295
},
296+
/**
297+
* 下个月
298+
*/
228299
next() {
229300
const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
230301
this.setDate(nextDate)
231302
this.monthSwitch()
232303
},
304+
/**
305+
* 设置日期
306+
* @param {Object} date
307+
*/
233308
setDate(date) {
234309
this.cale.setDate(date)
235310
this.weeks = this.cale.weeks

0 commit comments

Comments
 (0)