doc(datetime-picker): update

Author: Fasttian

docs/components/datetime-picker.md

@@ -29,10 +29,94 @@ ___点击 picker 默认值规则：___
 在 ``template`` 中使用组件
 
 ```html
-<uni-datetime-picker></uni-datetime-picker>
-<uni-datetime-picker v-model="vModelDatetime" start="2010-6-10 08:30:30" end="2021-6-10 08:30:30"></uni-datetime-picker>
-<uni-datetime-picker :value="timestamp" return-type="timestamp" start="1276129830000" end="1623285030000" @change="timestampChange"></uni-datetime-picker>
-<uni-datetime-picker type="date" :value="2020-6-25" start="2020-6-15" end="2025-6-15" @change="dateChange"></uni-datetime-picker>
+<template>
+	<view class="page">
+		<text class="example-info">可以同时选择日期和时间的选择器</text>
+		<uni-section :title="'日期用法：' + single" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker type="date" :value="single" start="2021-3-20" end="2021-6-20" @change="change" />
+		</view>
+		<uni-section :title="'时间戳用法：' + single" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker returnType="timestamp" @change="changeLog($event)" start="2021-3-20" end="2021-5-20"  />
+		</view>
+		<uni-section :title="'日期时间用法：' + datetimesingle" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker type="datetime" v-model="datetimesingle" @change="changeLog" />
+		</view>
+		<uni-section :title="'v-model用法：' + single" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker v-model="single" />
+		</view>
+		<uni-section :title="'插槽用法：' + single" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker v-model="single">我是一个插槽，点击我</uni-datetime-picker>
+		</view>
+		<uni-section :title="'无边框用法：' + single" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker v-model="single" :border="false" />
+		</view>
+		<uni-section :title="'disabled用法：' + single" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker v-model="single" disabled />
+		</view>
+		<uni-section :title="'日期范围用法：' + '[' + range + ']'" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker v-model="range" type="daterange" start="2021-3-20" end="2021-5-20"
+				rangeSeparator="至" />
+		</view>
+		<uni-section :title="'日期时间范围用法：' + '[' + datetimerange + ']' " type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker v-model="datetimerange" type="datetimerange"
+				start="2021-3-20 12:00:00" end="2021-6-20 20:00:00" rangeSeparator="至" />
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				single: '2021-04-3',
+				datetimesingle: '2021-04-3',
+				range: ['2021-03-8', '2021-4-20'],
+				datetimerange: ['2021-03-20 20:10:10', '2021-05-10 10:10:10'],
+			}
+		},
+
+		watch: {
+			datetimesingle(newval) {
+				console.log('单选:', this.datetimesingle);
+			},
+			range(newval) {
+				console.log('范围选:', this.range);
+			},
+			datetimerange(newval) {
+				console.log('范围选:', this.datetimerange);
+			}
+		},
+		mounted() {
+			setTimeout(() => {
+				this.datetimesingle = '2021-5-1'
+				this.single = '2021-5-1'
+			},1000)
+		},
+
+		methods:{
+			change(e) {
+				this.single = e
+				console.log('----change事件:', this.single = e);
+			},
+			changeLog(e) {
+				console.log('----change事件:', e);
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	@import '@/common/uni-nvue.scss';
+</style>
 ```
 
 ## API
@@ -42,7 +126,7 @@ ___点击 picker 默认值规则：___
 |属性名						|类型						|默认值		|值域																	|说明																											|
 |:-:							|:-:						|:-:			|																			|:-:																											|
 |type							|String					|datetime	|date/daterange/datetime/datetimerange|选择器类型																								|
-|value						|String、Number	|-				|-																		|输入框当前值																							|
+|value						|String、Number、Array(范围选择)|-				|-																		|输入框当前值																							|
 |start						|String、Number	|-				|-																		|最小值，可以使用日期的字符串（String）、时间戳（Number）	|
 |end							|String、Number	|-				|-																		|最大值，可以使用日期的字符串（String）、时间戳（Number）	|
 |return-type			|String					|timestamp|timestamp 、string										|返回值格式																								|