PickerDate 日期选择器

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title="日期选择" class="p.30">
		<t-card class="mb.30" title="PickerDate 日期选择"
			sub-title="Canvas绘制更高性能!异步渲染不卡页面,自研滚动算法,支持年月日、年月日时分秒、年月日时分、时分秒、年月、年、周等日期选择，可限制选择范围"></t-card>
		<t-col class="tdr-tdb-mb.30-tdp">
			<t-text class="slh.60">当前日期:{{curDate}}</t-text>
		</t-col>
		<t-section title="默认值+日期限制" class="mb.30"></t-section>
		<t-picker-date class="tdr-mb.30" :value="defaultDate" :mode="['year', 'month', 'day']" :range="dateRange"
			@change="pickerChange" @confirm=pickerConfirm>
			<t-button class="mr.15-w.100%">请选择日期</t-button>
		</t-picker-date>
	</t-page>
</template>

<script setup>
	import { TuipickerDateRange } from '@/uni_modules/t-ui'
	const defaultDate = ref<string>('')
	const curDate = ref<string>('')
	const dateRange = ref<TuipickerDateRange>({
		year: [2000, 2048],
	})
	function pickerChange(e : UTSJSONObject) {
		curDate.value = `${e['time']}`
	}
	function pickerConfirm(e : UTSJSONObject[]) {
		console.log(e)
	}
</script>

Props

名称	描述	类型	默认值
type	选择器类型	String	'p'
mode	选择器模式，包括年、月、日、时、分、秒	String[]	['year', 'month', 'day', 'hour', 'minute', 'second']
range	日期范围	TuipickerDateRange	{}
format	日期格式化模式	String	'yyyy-mm-dd hh:MM:ss'
value	初始日期值	String	''

Events

名称	描述	参数
confirm	当用户确认选择时触发，并传递当前选中的日期和时间	UTSJSONObject
change	当日期和时间值发生变化时触发	UTSJSONObject
cancel	当用户取消选择时触发	-

Methods

名称	描述	参数
reset	重置组件的值	value: any
getValue	获取组件的值	-