uv-ui

# DatetimePicker 时间选择器

✈

组件名：uv-datetime-picker

点击下载&安装 (opens new window)

此选择器用于时间日期

# 平台兼容性

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

注意事项

为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。

  1. 本组件统一返回时间戳，如果需要格式化时间，可以自行转换。推荐使用 uv-ui 提供的API进行处理：Time时间格式化 (opens new window)
  2. mode="time"时传入的应该是一个 String ，如： 12:00 ，而不是 Number(new Date())
  3. 如果某些平台formatter参数不生效，可能就是不支持参数传递方法，可以使用setFormatter()进行设置

# 基本使用

  • 通过ref调用open()控制组件的打开。
  • 通过mode配置选择何种日期格式。
<template>
	<view>
		<uv-datetime-picker ref="datetimePicker" v-model="value" mode="datetime" @confirm="confirm">
		</uv-datetime-picker>
		<button @click="open">打开</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				value: Number(new Date())
			}
		},
		methods: {
			open() {
				this.$refs.datetimePicker.open();
			},
			confirm(e) {
				console.log('confirm', e);
			}
		}
	}
</script>

# 年 月 日

此模式通过mode设置为date。

<template>
	<view>
		<uv-datetime-picker ref="datetimePicker" v-model="value" mode="date" @confirm="confirm">
		</uv-datetime-picker>
		<button @click="open">打开</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				value: Number(new Date())
			}
		},
		methods: {
			open() {
				this.$refs.datetimePicker.open();
			},
			confirm(e) {
				console.log('confirm', e);
			}
		}
	}
</script>

# 过滤器

使用过滤器filter进项处理时间，下方示例是保留偶数年。

<template>
	<view>
		<uv-datetime-picker 
			ref="datetimePicker" 
			v-model="value" 
			mode="date" 
			:filter="filter" 
			@confirm="confirm">
		</uv-datetime-picker>
		<button @click="open">打开</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				value: Number(new Date())
			}
		},
		methods: {
			open() {
				this.$refs.datetimePicker.open();
			},
			confirm(e) {
				console.log('confirm', e);
			},
			filter(type, options) {
				if (type === 'year') {
					return options.filter((option) => option % 2 === 0)
				}
				return options;
			}
		}
	}
</script>

# 格式化

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

<template>
	<view>
		<uv-datetime-picker 
			ref="datetimePicker" 
			v-model="value" 
			mode="datetime" 
			:formatter="formatter" 
			@confirm="confirm">
		</uv-datetime-picker>
		<button @click="open">打开</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				value: Number(new Date())
			}
		},
		methods: {
			open() {
				this.$refs.datetimePicker.open();
			},
			confirm(e) {
				console.log('confirm', e);
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			}
		}
	}
</script>

注意：

某些平台可能不支持props传递函数，为了兼容性内置有方法，可以通过setFormatter方法设置规则。如下：

onReady() {
	//onReady 为uni-app支持的生命周期之一
	this.$refs.datetimePicker.setFormatter(this.formatter)
}

# 限制最大最小值

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

<template>
	<view>
		<uv-datetime-picker 
			ref="datetimePicker" 
			v-model="value" 
			mode="datetime" 
			:minDate="1587524800000" 
			:maxDate="1786778555000" 
			@confirm="confirm">
		</uv-datetime-picker>
		<button @click="open">打开</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				value: Number(new Date())
			}
		},
		methods: {
			open() {
				this.$refs.datetimePicker.open();
			},
			confirm(e) {
				console.log('confirm', e);
			}
		}
	}
</script>

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# DatetimePicker Props

参数 说明 类型 默认值 可选值
value / v-model 绑定值 String | Number - -
showToolbar 是否显示顶部的操作栏 Boolean true true | false
title 顶部标题 String - -
round 1.0.12 弹窗圆角 String | Number 0 -
mode 展示格式，见Mode Options String datetime datetime | date | time | year-month | year
clearDate 是否清空上次选择 Boolean false true | false
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 | false
itemHeight 各列中，单个选项的高度 String | Number 44 -
cancelText 取消按钮的文字 String 取消 -
confirmText 确认按钮的文字 String 确认 -
cancelColor 取消按钮的颜色 String #909193 -
confirmColor 确认按钮的颜色 String #3c9cff -
visibleItemCount 每列中可见选项的数量 String | Number 5 -
closeOnClickOverlay 是否允许点击遮罩关闭时间选择器 Boolean true true | false
closeOnClickConfirm 是否允许点击确认关闭时间选择器 Boolean true true | false

# Mode Options

属性名 说明
datetime 年月日时分选择
date 年月日选择
time 时分选择，mode="time"时value的格式应该类似00:00
year-month 年月选择
year 年选择

# DatetimePicker Methods

方法名 说明
open 弹出时间选择器组件
setFormatter 格式化函数，见上方示例

# DatetimePicker Events

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

注意

示例依赖了 uv-picker uv-ui-tools 等多个组件，直接拷贝示例代码将无法正常运行。 请到 组件下载页面 (opens new window) ，在页面右侧选择 使用 HBuilderX导入示例项目 。

← Code 验证码倒计时 →