@@ -29,10 +29,94 @@ ___点击 picker 默认值规则:___
2929在 `` template `` 中使用组件
3030
3131``` 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 >
36120```
37121
38122## API
@@ -42,10 +126,10 @@ ___点击 picker 默认值规则:___
42126| 属性名 | 类型 | 默认值 | 值域 | 说明 |
43127| :-: | :-: | :-: | | :-: |
44128| type | String | datetime | date/daterange/datetime/datetimerange| 选择器类型 |
45- | value | String、Number | - | - | 输入框当前值 |
129+ | value | String、Number、Array(范围选择) | - | - | 输入框当前值 |
46130| start | String、Number | - | - | 最小值,可以使用日期的字符串(String)、时间戳(Number) |
47131| end | String、Number | - | - | 最大值,可以使用日期的字符串(String)、时间戳(Number) |
48- | return-type | String | timestamp | timestamp 、string | 返回值格式 |
132+ | return-type | String | string | timestamp 、string | 返回值格式 |
49133| border | Boolean、String| true | | 是否有边框 |
50134| rangeSeparator | String | '-' | - | 选择范围时的分隔符 |
51135| placeholder | String | - | - | 非范围选择时的占位内容 |
@@ -60,4 +144,12 @@ ___点击 picker 默认值规则:___
60144
61145| 事件名称 | 说明 | 返回值 |
62146| :-: | :-: | :-: |
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