Skip to content

Commit d150ea5

Browse files
FasttianFasttian
committed
- 新增 maskClick 事件
- 修复 特殊情况日历 rpx 布局错误的 bug，rpx -> px - 修复 范围选择时清空返回值不合理的bug，[, ] -> []
1 parent 0d2868b commit d150ea5

File tree

8 files changed

+130
-24
lines changed

8 files changed

+130
-24
lines changed

‎docs/components/datetime-picker.md‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ ___点击 picker 默认值规则：___
129129
|value |String、Number、Array(范围选择)|- |- |输入框当前值 |
130130
|start |String、Number |- |- |最小值，可以使用日期的字符串（String）、时间戳（Number） |
131131
|end |String、Number |- |- |最大值，可以使用日期的字符串（String）、时间戳（Number） |
132-
|return-type |String |timestamp|timestamp 、string |返回值格式 |
132+
|return-type |String |string|timestamp 、string |返回值格式 |
133133
|border |Boolean、String|true | |是否有边框 |
134134
|rangeSeparator |String |'-' |- |选择范围时的分隔符 |
135135
|placeholder |String |- |- |非范围选择时的占位内容 |
@@ -144,4 +144,12 @@ ___点击 picker 默认值规则：___
144144

145145
|事件名称 |说明 |返回值 |
146146
|:-: |:-: |:-: |
147-
|change |确定日期时间时触发的事件，参数为当前选择的日期对象 | 单选返回日期字符串，如：'2010-02-3'；范围选返回日期字符串数组，如：['2020-10-1', '2021-4-1'] |
147+
|change |确定日期时间时触发的事件，参数为当前选择的日期对象 | 单选返回日期字符串，如：'2010-02-3'；范围选返回日期字符串数组，如：['2020-10-1', '2021-4-1'] |
148+
|maskClick|点击遮罩层触发|-|
149+
150+
### Popup Methods
151+
152+
|方法称名 |说明|参数|
153+
|:-:|:-:|:-:|
154+
|show|打开弹出层|-|
155+
|close|关闭弹出层 |-|

‎pages/nvue/datetime-picker/datetime-picker.nvue‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<text class="example-info">可以同时选择日期和时间的选择器</text>
44
<uni-section :title="'日期用法：' + single" type="line"></uni-section>
55
<view class="example-body">
6-
<uni-datetime-picker type="date" :value="single" start="2021-3-20" end="2021-6-20" @change="change" />
6+
<uni-datetime-picker type="date" :value="single" start="2021-3-20" end="2021-6-20" @change="change" @maskClick="maskClick" />
77
</view>
88
<uni-section :title="'时间戳用法：' + single" type="line"></uni-section>
99
<view class="example-body">
@@ -36,8 +36,7 @@
3636
</view>
3737
<uni-section :title="'日期时间范围用法：' + '[' + datetimerange + ']' " type="line"></uni-section>
3838
<view class="example-body">
39-
<uni-datetime-picker v-model="datetimerange" type="datetimerange"
40-
start="2021-3-20 12:00:00" end="2021-6-20 20:00:00" rangeSeparator="至" />
39+
<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
4140
</view>
4241
</view>
4342
</template>
@@ -78,6 +77,9 @@
7877
},
7978
changeLog(e) {
8079
console.log('----change事件:', e);
80+
},
81+
maskClick(e){
82+
console.log('----maskClick事件:', e);
8183
}
8284
}
8385
}

‎pages/vue/datetime-picker/datetime-picker.vue‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<text class="example-info">可以同时选择日期和时间的选择器</text>
44
<uni-section :title="'日期用法：' + single" type="line"></uni-section>
55
<view class="example-body">
6-
<uni-datetime-picker type="date" :value="single" start="2021-3-20" end="2021-6-20" @change="change" />
6+
<uni-datetime-picker type="date" :value="single" start="2021-3-20" end="2021-6-20" @change="change" @maskClick="maskClick" />
77
</view>
88
<uni-section :title="'时间戳用法：' + single" type="line"></uni-section>
99
<view class="example-body">
@@ -36,8 +36,7 @@
3636
</view>
3737
<uni-section :title="'日期时间范围用法：' + '[' + datetimerange + ']' " type="line"></uni-section>
3838
<view class="example-body">
39-
<uni-datetime-picker v-model="datetimerange" type="datetimerange"
40-
start="2021-3-20 12:00:00" end="2021-6-20 20:00:00" rangeSeparator="至" />
39+
<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
4140
</view>
4241
</view>
4342
</template>
@@ -78,6 +77,9 @@
7877
},
7978
changeLog(e) {
8079
console.log('----change事件:', e);
80+
},
81+
maskClick(e){
82+
console.log('----maskClick事件:', e);
8183
}
8284
}
8385
}

‎uni_modules/uni-datetime-picker/changelog.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
## 2.0.9（2021-07-07）
2+
- 新增 maskClick 事件
3+
- 修复 特殊情况日历 rpx 布局错误的 bug，rpx -> px
4+
- 修复 范围选择时清空返回值不合理的bug，['', ''] -> []
15
## 2.0.8（2021-07-07）
26
- 新增 日期时间显示框支持插槽
37
## 2.0.7（2021-07-01）

‎uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -94,13 +94,13 @@
9494
flex-direction: column;
9595
justify-content: center;
9696
align-items: center;
97-
width: 100rpx;
98-
height: 100rpx;
97+
width: 43px;
98+
height: 43px;
9999
/* #ifdef H5 */
100100
cursor: pointer;
101101
/* #endif */
102102
}
103-
103+
104104
105105
.uni-calendar-item__weeks-box-circle {
106106
position: absolute;
@@ -142,7 +142,7 @@
142142
color: #fff;
143143
opacity: 0.8;
144144
}
145-
145+
146146
.uni-calendar-item--multiple .uni-calendar-item--checked-range-text {
147147
color: #333;
148148
}
@@ -168,13 +168,13 @@
168168
box-sizing: border-box;
169169
border: 6px solid #f2f6fc;
170170
}
171-
171+
172172
.uni-calendar-item--before-checked-x {
173173
// border-top-left-radius: 25px;
174174
// border-bottom-left-radius: 25px;
175175
background-color: #f2f6fc;
176176
}
177-
177+
178178
.uni-calendar-item--after-checked-x {
179179
// border-top-right-radius: 25px;
180180
// border-bottom-right-radius: 25px;

‎uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -393,7 +393,8 @@
393393
close() {
394394
setTimeout(() => {
395395
this.popup = false
396-
// this.visible = true
396+
// this.visible = true
397+
this.$emit('maskClick', this.value)
397398
}, 20)
398399
},
399400
setEmit(value) {
@@ -575,8 +576,8 @@
575576
this.$refs.right.cale.lastHover = false
576577
this.$refs.right.setDate()
577578
this.$refs.right.next()
578-
this.$emit('change', ['', ''])
579-
this.$emit('input', ['', ''])
579+
this.$emit('change', [])
580+
this.$emit('input', [])
580581
}
581582
// if (this.popup) this.popup = false
582583
},

‎uni_modules/uni-datetime-picker/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"id": "uni-datetime-picker",
33
"displayName": "uni-datetime-picker 日期选择器",
4-
"version": "2.0.8",
4+
"version": "2.0.9",
55
"description": "uni-datetime-picker 日期时间选择器，支持日历，支持范围选择",
66
"keywords": [
77
"uni-datetime-picker",

‎uni_modules/uni-datetime-picker/readme.md‎

Lines changed: 95 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,91 @@ ___点击 picker 默认值规则：___
2727
在 ``template`` 中使用组件
2828

2929
```html
30-
<uni-datetime-picker></uni-datetime-picker>
31-
<uni-datetime-picker v-model="vModelDatetime" start="2010-6-10 08:30:30" end="2021-6-10 08:30:30"></uni-datetime-picker>
32-
<uni-datetime-picker :value="timestamp" return-type="timestamp" start="1276129830000" end="1623285030000" @change="timestampChange"></uni-datetime-picker>
33-
<uni-datetime-picker type="date" :value="2020-6-25" start="2020-6-15" end="2025-6-15" @change="dateChange"></uni-datetime-picker>
30+
<template>
31+
<view class="page">
32+
<text class="example-info">可以同时选择日期和时间的选择器</text>
33+
<uni-section :title="'日期用法：' + single" type="line"></uni-section>
34+
<view class="example-body">
35+
<uni-datetime-picker type="date" :value="single" start="2021-3-20" end="2021-6-20" @change="change" />
36+
</view>
37+
<uni-section :title="'时间戳用法：' + single" type="line"></uni-section>
38+
<view class="example-body">
39+
<uni-datetime-picker returnType="timestamp" @change="changeLog($event)" start="2021-3-20" end="2021-5-20" />
40+
</view>
41+
<uni-section :title="'日期时间用法：' + datetimesingle" type="line"></uni-section>
42+
<view class="example-body">
43+
<uni-datetime-picker type="datetime" v-model="datetimesingle" @change="changeLog" />
44+
</view>
45+
<uni-section :title="'v-model用法：' + single" type="line"></uni-section>
46+
<view class="example-body">
47+
<uni-datetime-picker v-model="single" />
48+
</view>
49+
<uni-section :title="'插槽用法：' + single" type="line"></uni-section>
50+
<view class="example-body">
51+
<uni-datetime-picker v-model="single">我是一个插槽，点击我</uni-datetime-picker>
52+
</view>
53+
<uni-section :title="'无边框用法：' + single" type="line"></uni-section>
54+
<view class="example-body">
55+
<uni-datetime-picker v-model="single" :border="false" />
56+
</view>
57+
<uni-section :title="'disabled用法：' + single" type="line"></uni-section>
58+
<view class="example-body">
59+
<uni-datetime-picker v-model="single" disabled />
60+
</view>
61+
<uni-section :title="'日期范围用法：' + '[' + range + ']'" type="line"></uni-section>
62+
<view class="example-body">
63+
<uni-datetime-picker v-model="range" type="daterange" start="2021-3-20" end="2021-5-20"
64+
rangeSeparator="至" />
65+
</view>
66+
<uni-section :title="'日期时间范围用法：' + '[' + datetimerange + ']' " type="line"></uni-section>
67+
<view class="example-body">
68+
<uni-datetime-picker v-model="datetimerange" type="datetimerange"
69+
start="2021-3-20 12:00:00" end="2021-6-20 20:00:00" rangeSeparator="至" />
70+
</view>
71+
</view>
72+
</template>
73+
74+
<script>
75+
export default {
76+
data() {
77+
return {
78+
single: '2021-04-3',
79+
datetimesingle: '2021-04-3',
80+
range: ['2021-03-8', '2021-4-20'],
81+
datetimerange: ['2021-03-20 20:10:10', '2021-05-10 10:10:10'],
82+
}
83+
},
84+
85+
watch: {
86+
datetimesingle(newval) {
87+
console.log('单选:', this.datetimesingle);
88+
},
89+
range(newval) {
90+
console.log('范围选:', this.range);
91+
},
92+
datetimerange(newval) {
93+
console.log('范围选:', this.datetimerange);
94+
}
95+
},
96+
mounted() {
97+
setTimeout(() => {
98+
this.datetimesingle = '2021-5-1'
99+
this.single = '2021-5-1'
100+
},1000)
101+
},
102+
103+
methods:{
104+
change(e) {
105+
this.single = e
106+
console.log('-change事件:', e);
107+
}
108+
}
109+
}
110+
</script>
111+
112+
<style lang="scss">
113+
@import '@/common/uni-nvue.scss';
114+
</style>
34115
```
35116

36117
## API
@@ -40,10 +121,10 @@ ___点击 picker 默认值规则：___
40121
|属性名 |类型 |默认值 |值域 |说明 |
41122
|:-: |:-: |:-: | |:-: |
42123
|type |String |datetime |date/daterange/datetime/datetimerange|选择器类型 |
43-
|value |String、Number |- |- |输入框当前值 |
124+
|value |String、Number、Array(范围选择)|- |- |输入框当前值 |
44125
|start |String、Number |- |- |最小值，可以使用日期的字符串（String）、时间戳（Number） |
45126
|end |String、Number |- |- |最大值，可以使用日期的字符串（String）、时间戳（Number） |
46-
|return-type |String |timestamp|timestamp 、string |返回值格式 |
127+
|return-type |String |string|timestamp 、string |返回值格式 |
47128
|border |Boolean、String|true | |是否有边框 |
48129
|rangeSeparator |String |'-' |- |选择范围时的分隔符 |
49130
|placeholder |String |- |- |非范围选择时的占位内容 |
@@ -59,6 +140,14 @@ ___点击 picker 默认值规则：___
59140
|事件名称 |说明 |返回值 |
60141
|:-: |:-: |:-: |
61142
|change |确定日期时间时触发的事件，参数为当前选择的日期对象 | 单选返回日期字符串，如：'2010-02-3'；范围选返回日期字符串数组，如：['2020-10-1', '2021-4-1'] |
143+
|maskClick|点击遮罩层触发|-|
144+
145+
### Popup Methods
146+
147+
|方法称名 |说明|参数|
148+
|:-:|:-:|:-:|
149+
|show|打开弹出层|-|
150+
|close|关闭弹出层 |-|
62151

63152
## 组件示例
64153

0 commit comments

Comments
 (0)