@@ -29,10 +29,94 @@ ___点击 picker 默认值规则:___
29
29
在 `` template `` 中使用组件
30
30
31
31
``` html
32
- <uni-datetime-picker ></uni-datetime-picker >
33
- <uni-datetime-picker v-model =" vModelDatetime" start =" 2010-6-10 08:30:30" end =" 2021-6-10 08:30:30" ></uni-datetime-picker >
34
- <uni-datetime-picker :value =" timestamp" return-type =" timestamp" start =" 1276129830000" end =" 1623285030000" @change =" timestampChange" ></uni-datetime-picker >
35
- <uni-datetime-picker type =" date" :value =" 2020-6-25" start =" 2020-6-15" end =" 2025-6-15" @change =" dateChange" ></uni-datetime-picker >
32
+ <template >
33
+ <view class =" page" >
34
+ <text class =" example-info" >可以同时选择日期和时间的选择器</text >
35
+ <uni-section :title =" '日期用法:' + single" type =" line" ></uni-section >
36
+ <view class =" example-body" >
37
+ <uni-datetime-picker type =" date" :value =" single" start =" 2021-3-20" end =" 2021-6-20" @change =" change" />
38
+ </view >
39
+ <uni-section :title =" '时间戳用法:' + single" type =" line" ></uni-section >
40
+ <view class =" example-body" >
41
+ <uni-datetime-picker returnType =" timestamp" @change =" changeLog($event)" start =" 2021-3-20" end =" 2021-5-20" />
42
+ </view >
43
+ <uni-section :title =" '日期时间用法:' + datetimesingle" type =" line" ></uni-section >
44
+ <view class =" example-body" >
45
+ <uni-datetime-picker type =" datetime" v-model =" datetimesingle" @change =" changeLog" />
46
+ </view >
47
+ <uni-section :title =" 'v-model用法:' + single" type =" line" ></uni-section >
48
+ <view class =" example-body" >
49
+ <uni-datetime-picker v-model =" single" />
50
+ </view >
51
+ <uni-section :title =" '插槽用法:' + single" type =" line" ></uni-section >
52
+ <view class =" example-body" >
53
+ <uni-datetime-picker v-model =" single" >我是一个插槽,点击我</uni-datetime-picker >
54
+ </view >
55
+ <uni-section :title =" '无边框用法:' + single" type =" line" ></uni-section >
56
+ <view class =" example-body" >
57
+ <uni-datetime-picker v-model =" single" :border =" false" />
58
+ </view >
59
+ <uni-section :title =" 'disabled用法:' + single" type =" line" ></uni-section >
60
+ <view class =" example-body" >
61
+ <uni-datetime-picker v-model =" single" disabled />
62
+ </view >
63
+ <uni-section :title =" '日期范围用法:' + '[' + range + ']'" type =" line" ></uni-section >
64
+ <view class =" example-body" >
65
+ <uni-datetime-picker v-model =" range" type =" daterange" start =" 2021-3-20" end =" 2021-5-20"
66
+ rangeSeparator =" 至" />
67
+ </view >
68
+ <uni-section :title =" '日期时间范围用法:' + '[' + datetimerange + ']' " type =" line" ></uni-section >
69
+ <view class =" example-body" >
70
+ <uni-datetime-picker v-model =" datetimerange" type =" datetimerange"
71
+ start =" 2021-3-20 12:00:00" end =" 2021-6-20 20:00:00" rangeSeparator =" 至" />
72
+ </view >
73
+ </view >
74
+ </template >
75
+
76
+ <script >
77
+ export default {
78
+ data () {
79
+ return {
80
+ single: ' 2021-04-3' ,
81
+ datetimesingle: ' 2021-04-3' ,
82
+ range: [' 2021-03-8' , ' 2021-4-20' ],
83
+ datetimerange: [' 2021-03-20 20:10:10' , ' 2021-05-10 10:10:10' ],
84
+ }
85
+ },
86
+
87
+ watch: {
88
+ datetimesingle (newval ) {
89
+ console .log (' 单选:' , this .datetimesingle );
90
+ },
91
+ range (newval ) {
92
+ console .log (' 范围选:' , this .range );
93
+ },
94
+ datetimerange (newval ) {
95
+ console .log (' 范围选:' , this .datetimerange );
96
+ }
97
+ },
98
+ mounted () {
99
+ setTimeout (() => {
100
+ this .datetimesingle = ' 2021-5-1'
101
+ this .single = ' 2021-5-1'
102
+ },1000 )
103
+ },
104
+
105
+ methods: {
106
+ change (e ) {
107
+ this .single = e
108
+ console .log (' ----change事件:' , this .single = e);
109
+ },
110
+ changeLog (e ) {
111
+ console .log (' ----change事件:' , e);
112
+ }
113
+ }
114
+ }
115
+ </script >
116
+
117
+ <style lang =" scss" >
118
+ @import ' @/common/uni-nvue.scss' ;
119
+ </style >
36
120
```
37
121
38
122
## API
@@ -42,10 +126,10 @@ ___点击 picker 默认值规则:___
42
126
| 属性名 | 类型 | 默认值 | 值域 | 说明 |
43
127
| :-: | :-: | :-: | | :-: |
44
128
| type | String | datetime | date/daterange/datetime/datetimerange| 选择器类型 |
45
- | value | String、Number | - | - | 输入框当前值 |
129
+ | value | String、Number、Array(范围选择) | - | - | 输入框当前值 |
46
130
| start | String、Number | - | - | 最小值,可以使用日期的字符串(String)、时间戳(Number) |
47
131
| end | String、Number | - | - | 最大值,可以使用日期的字符串(String)、时间戳(Number) |
48
- | return-type | String | timestamp | timestamp 、string | 返回值格式 |
132
+ | return-type | String | string | timestamp 、string | 返回值格式 |
49
133
| border | Boolean、String| true | | 是否有边框 |
50
134
| rangeSeparator | String | '-' | - | 选择范围时的分隔符 |
51
135
| placeholder | String | - | - | 非范围选择时的占位内容 |
@@ -60,4 +144,12 @@ ___点击 picker 默认值规则:___
60
144
61
145
| 事件名称 | 说明 | 返回值 |
62
146
| :-: | :-: | :-: |
63
- | 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| 关闭弹出层 | -|
0 commit comments