uView Next

# DatetimePicker 选择器

此选择器用于时间日期

# 平台差异说明

App（vue） App（nvue） H5 小程序
√ √ √ √

# 基本使用

  • 通过 show 绑定一个布尔值变量，用于控制组件的弹出与收起
  • 通过 mode 配置选择何种日期格式
<template>
	<view>
		<u-datetime-picker
			:show="show"
			v-model="value1"
			mode="datetime"
		></u-datetime-picker>
		<u-button @click="show = true">打开</u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			value1: Number(new Date()),
		}
	}
}
</script>

✅ Copy success!

# 使用触发器 3.0.1

  • 无需通过 show 变量控制弹出层的打开和收起
<template>
	<view>
		<u-datetime-picker mode="datetime" closeOnClickOverlay @confirm="confirm">
			<template #trigger>
				<u-input :value="value" placeholder="请选择日期时间" disabled-color="#fff" disabled clearable />
			</template>
		</u-datetime-picker>
	</view>
</template>

<script>
export default {
	data() {
		return {
			value: '',
		}
	},
	methods: {
		confirm(e) {
			this.value = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM')
		}
	}
}
</script>

✅ Copy success!

# 年 月 日

此模式通过 mode 设置为 date

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

<script>
export default {
	data() {
		return {
			show: false,
			value1: Number(new Date()),
		}
	}
}
</script>

✅ Copy success!

# 格式化

如有需要，可以通过 formatter 参数编写自定义格式化规则

注意

微信小程序不支持通过 props 传递函数参数，所以组件内部暴露了一个 setFormatter 方法用于设置格式化方法，注意在页面的 onReady 生命周期获取 ref 再操作

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

<script>
export default {
	data() {
		return {
			show: false,
			value1: Number(new Date()),
		}
	},
	onReady() {
		// 微信小程序需要用此写法
		this.$refs.datetimePicker.setFormatter(this.formatter)
	},
	methods: {
		formatter(type, value) {
			if (type === 'year') {
				return `${value}年`
			}
			if (type === 'month') {
				return `${value}月`
			}
			if (type === 'day') {
				return `${value}日`
			}
			return value
		},
	},
}
</script>

✅ Copy success!

# 限制最大最小值

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

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

<script>
export default {
	data() {
		return {
			show: false,
			value1: Number(new Date()),
		}
	}
}
</script>

✅ Copy success!

# 页面源码地址

页面源码地址


 github  gitee

# API

# Props

参数 说明 类型 默认值 可选值
show 用于控制选择器的弹出与收起 Boolean false true
showToolbar 是否显示顶部的操作栏 Boolean true false
v-model 绑定值 String | Number - -
title 顶部标题 String - -
mode 展示格式 String datetime date为日期选择，time为时间选择，year-month为年月选择
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 null -
formatter 输入过滤或格式化函数(如需兼容微信小程序，则只能通过setFormatter方法) Function null -
loading 是否显示加载中状态 Boolean false true
itemHeight 各列中，单个选项的高度 String | Number 44 -
cancelText 取消按钮的文字 String 取消 -
confirmText 确认按钮的文字 String 确认 -
cancelColor 取消按钮的颜色 String #909193 -
confirmColor 确认按钮的颜色 String #3c9cff -
visibleItemCount 每列中可见选项的数量 String | Number 5 -
closeOnClickOverlay 是否允许点击遮罩关闭选择器（注意：关闭事件需要自行处理，只会在开启closeOnClickOverlay后点击遮罩层执行close回调） Boolean false true
defaultIndex 各列的默认索引 Array [] -
immediateChange 2.0.38 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件 Boolean false true
round 3.0.1 圆角值，默认无圆角 String | Number 0 -

# Slot 3.0.1

名称 说明
trigger 自定义触发

# Events

事件名 说明 回调参数 版本
close 关闭选择器时触发 - -
confirm 点击确定按钮时触发 value:返回所选时间戳，mode:当前模式 -
change 当选择值变化时触发 value:返回所选时间戳，mode:当前模式 -
cancel 点击取消按钮 - -

# Methods

方法名 说明
setFormatter 为兼容微信小程序而暴露的内部方法，见上方说明

← AreaPicker 地区选择器 →