greenPro/pages/extUI/datetime-picker/datetime-picker.vue

<template>
	<view class="page container">
		<uni-card :is-shadow="false" is-full>
			<text class="uni-h6">可以同时选择日期和时间的选择器</text>
		</uni-card>
		<uni-section :title="'日期用法：' + dateString" type="line"></uni-section>
		<view class="example-body">
			<uni-datetime-picker type="date" :clear-icon="false" v-model="dateString" @maskClick="maskClick" />
		</view>
		<uni-section :title="'日期时间用法：' + datetimeString" type="line"></uni-section>
		<view class="example-body">
			<uni-datetime-picker type="datetime" :start="start" :end="end" v-model="datetimeString" @change="change" />
		</view>
		<uni-section :title="'日期范围用法：' + '[' + dateRange + ']'" type="line"></uni-section>
		<view class="example-body">
			<uni-datetime-picker v-model="dateRange" type="daterange" @maskClick="maskClick" />
		</view>
		<uni-section :title="'日期时间范围用法：' + '[' + datetimeRange + ']' " type="line"></uni-section>
		<view class="example-body">
			<uni-datetime-picker v-model="datetimeRange" type="datetimerange" rangeSeparator="至" />
		</view>
		<uni-section :title="'时间戳用法：' + dateTimestamp" type="line"></uni-section>
		<view class="example-body">
			<uni-datetime-picker returnType="timestamp" v-model="dateTimestamp" @change="change" />
		</view>
		<uni-section :title="'date 对象用法：' + dateInstance" type="line"></uni-section>
		<view class="example-body">
			<uni-datetime-picker type="datetime" returnType="date" v-model="dateInstance" @change="change" />
		</view>
		<uni-section :title="'插槽用法：' + dateString" type="line"></uni-section>
		<view class="example-body">
			<uni-datetime-picker v-model="dateString">我是一个插槽，点击我</uni-datetime-picker>
		</view>
		<uni-section :title="'无边框用法：' + dateString" type="line"></uni-section>
		<view class="example-body">
			<uni-datetime-picker v-model="dateString" :border="false" />
		</view>
		<uni-section :title="'隐藏清除按钮用法：' + dateString" type="line"></uni-section>
		<view class="example-body">
			<uni-datetime-picker v-model="dateString" :clearIcon="false" />
		</view>
		<uni-section :title="'disabled用法：' + dateString" type="line"></uni-section>
		<view class="example-body">
			<uni-datetime-picker v-model="dateString" disabled />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dateString: this.getDateTime(new Date()),
				datetimeString: this.getDateTime(new Date()),
				dateTimestamp: Date.now(),
				dateInstance: new Date(),
				dateRange: [this.getDate(Date.now() - 5 * 24 * 3600000), this.getDate(Date.now() + 5 * 24 * 3600000)],
				datetimeRange: [this.getDateTime(Date.now() - 5 * 24 * 3600000), this.getDateTime(Date.now() + 5 * 24 * 3600000)],
				start: Date.now() - 10 * 24 * 3600000,
				end: Date.now() + 10 * 24 * 3600000
			}
		},
		watch: {
			datetimeString() {
				console.log('日期时间单选:', this.datetimeString);
			},
			dateRange() {
				console.log('日期范围选:', this.dateRange);
			},
			datetimeRange() {
				console.log('日期时间范围选:', this.datetimeRange);
			}
		},
		methods: {
			change(e) {
				console.log('----change事件:', e);
			},
			maskClick(e) {
				console.log('----maskClick事件:', e);
			},
      getDateTime(date){
        return `${this.getDate(date)} ${this.getTime(date)}`
      },
      getDate(date){
        date = new Date(date)
        const year = date.getFullYear()
        const month = date.getMonth()+1
        const day = date.getDate()
        return `${year}-${this.addZero(month)}-${this.addZero(day)}`
      },
      getTime(date){
        date = new Date(date)
        const hour = date.getHours()
        const minute = date.getMinutes()
        const second = date.getSeconds()
        return this.hideSecond ? `${this.addZero(hour)}:${this.addZero(minute)}` : `${this.addZero(hour)}:${this.addZero(minute)}:${this.addZero(second)}`
      },
			addZero(num) {
				if (num < 10) {
					num = `0${num}`
				}
				return num
			}
		}
	}
</script>

<style lang="scss">
	.example-body {
		background-color: #fff;
		padding: 10px;
	}
</style>