此选择器用于时间日期

基本使用

• 通过 show 绑定一个布尔值变量，用于控制组件的弹出与收起
• 通过 mode 配置选择何种日期格式

<template>
	<view>
		<un-datetime-picker
			:show="show"
			v-model="value1"
			mode="datetime"
		></un-datetime-picker>
		<un-button @click="show = true">打开</un-button>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const show = ref(false)
const value1 = ref(new Date().valueOf())
</script>

年 月 日

此模式通过 mode 设置为 date

<template>
	<view>
		<un-datetime-picker
			:show="show"
			v-model="value1"
			mode="date"
		></un-datetime-picker>
		<un-button @click="show = true">打开</un-button>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const show = ref(false)
const value1 = ref(new Date().valueOf())
</script>

格式化

<template>
	<view>
		<un-datetime-picker
			ref="datetimePicker"
			:show="show"
			v-model="value1"
			mode="datetime"
			:formatter="formatter"
		></un-datetime-picker>
		<un-button @click="show = true">打开</un-button>
	</view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const show = ref(false)
const value1 = ref(new Date().valueOf())
const datetimePicker = ref(null)

const formatter = (type, value) => {
	if (type === 'year') {
		return `${value}年`
	}
	if (type === 'month') {
		return `${value}月`
	}
	if (type === 'day') {
		return `${value}日`
	}
	return value
}
</script>

限制最大最小值

参数 minDate 和 maxDate 可以设置最大值和最小值（传入时间戳）

<template>
	<view>
		<un-datetime-picker
			:show="show"
			v-model="value1"
			:minDate="1587524800000"
			:maxDate="1786778555000"
			mode="datetime"
		></un-datetime-picker>
		<un-button @click="show = true">打开</un-button>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const show = ref(false)
const value1 = ref(new Date().valueOf())
</script>

API

Props

参数	说明	类型	默认值
show	用于控制选择器的弹出与收起	Boolean	false
showToolbar	是否显示顶部的操作栏	Boolean	true
v-model	绑定值(必须是时间戳或者有效的格式化时间)	String | Number	-
title	顶部标题	String	-
mode v4.1.0	展示格式	Enum	datetime
maxDate	可选的最大时间（时间戳毫秒）	Number	最大默认值为后10年
minDate	可选的最小时间（时间戳毫秒）	Number	最小默认值为前10年
minHour	可选的最小小时，仅mode=time有效	Number	0
maxHour	可选的最大小时，仅mode=time有效	Number	23
minMinute	可选的最小分钟，仅mode=time有效	Number	0
maxMinute	可选的最大分钟，仅mode=time有效	Number	59
filter	选项过滤函数	Function	-
formatter	输入过滤或格式化函数	Function	-
loading	是否显示加载中状态	Boolean	false
itemHeight	各列中，单个选项的高度	String | Number	44
cancelText	取消按钮的文字	String	取消
confirmText	确认按钮的文字	String	确认
cancelColor	取消按钮的颜色	String	#909193
confirmColor	确认按钮的颜色	String	#3c9cff
visibleItemCount	每列中可见选项的数量	String | Number	5
closeOnClickOverlay	是否允许点击遮罩关闭选择器（注意：关闭事件需要自行处理，只会在开启closeOnClickOverlay后点击遮罩层执行close回调）	Boolean	true
defaultIndex	各列的默认索引	Array	[]
immediateChange	是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件	Boolean	false
round	圆角值，默认无圆角	String | Number	0
format v4.1.0	显示在输入框中的格式，ISO 8601日期格式	String	YYYY-MM-DD
valueFormat v4.1.0	绑定值的格式，ISO 8601日期格式	String	-
showInput v4.1.0	是否显示input输入框	Boolean	false
inputProps v4.1.0	input属性，参考input组件	Object	-

Events

事件名	说明	类型
close	关闭选择器时触发	Function
cancel	点击取消按钮	Function
confirm	点击确定按钮时触发	Function
change	当选择值变化时触发	Function

数据类型

/**
 * 日期时间选择器事件类型
 */
type UnDatetimePickerEvent = {
	mode: string //'date' | 'time' | 'year-month' | 'datetime'
    value: string | number // 选择的值的时间戳
}