DatePicker 日期时间选择器

支持日期、时间和区间选择，可限制日期与时分秒范围。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 年月日选择 -->
<fui-date-picker :show="showDatePicker" :type="3" @change="handleDateChange"
  @cancel="showDatePicker = false" />

页面需声明显示状态和事件处理方法。单值选择的 change 返回 result 等字段；区间模式返回 startDate 和 endDate。

属性

属性	类型	说明	官网默认值
show	Boolean	是否显示	false
type	Number / String	1 年、2 年月、3 年月日、4 年月日时、5 年月日时分、6 时分、7 时分秒、8 分秒	1
value	String	初始值或区间起始值	-
valueEnd	String	区间结束值	-
minDate	String	最小日期	2010-01-01
maxDate	String	最大日期	2030-12-31
hourRange	Array	小时范围，0–23	[0, 23]
minuteRange	Array	分钟范围，0–59	[0, 59]
secondRange	Array	秒数范围，0–59	[0, 59]
unit	Boolean	是否显示年月日等单位	true
range	Boolean	是否选择区间	false
start	String	区间起始按钮文字	起始日期
end	String	区间结束按钮文字	结束日期
showEnd	Boolean	有结束默认值时是否默认选择结束端	true
rangeBackground	String	区间选中按钮背景色	-
radius	Boolean	是否显示圆角	false
height	Number / String	内容高度，单位 rpx	520
size	Number / String	内容字号，单位 px	16
color	String	内容文字颜色	-
title	String	标题	-
titleSize	Number / String	标题字号，单位 rpx	28
titleColor	String	标题颜色	-
confirmText	String	确认文字	确定
confirmColor	String	确认文字颜色	-
cancelText	String	取消文字	取消
cancelColor	String	取消文字颜色	-
btnSize	Number / String	按钮字号，单位 rpx	32
background	String	头部背景色	-
theme	String	主题：light 或 dark	light
maskClosable	Boolean	点击遮罩是否触发 cancel	true
maskBackground	String	遮罩颜色	rgba(0,0,0,.6)
zIndex	Number / String	层级，nvue 不支持	999
isClose	Boolean	确认后是否立即关闭	true
isAuto	Boolean	区间确认时是否自动赋值起止日期	true
param	Number / String	自定义参数	0

事件

事件	说明	回调参数
change	点击确认按钮	单值返回日期字段、result、param；区间返回 { startDate, endDate }
cancel	点击取消按钮或可关闭的遮罩	{ param }

区间日期对象包含 param。实例支持 reset()、open()、close()。

平台说明

nvue 暗色主题支持情况受组件及 HBuilderX 版本影响，层级受元素顺序影响。

插槽

插槽	说明
—	官网未列出该组件的插槽