DatePicker 日期时间选择器，用于选择日期或时间。支持设置最小日期和最大日期，支持选择日期区间（起始日期~结束日期）。

支持平台

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

代码演示

部分示例演示，完整使用请参考文档API。

选择年月日

通过 show 属性控制选择器显示隐藏，type 属性设置选择日期时间类型，@change 为确定按钮触发事件，返回选择值，@cancel 为取消按钮或遮罩触发事件，将 show 属性设置为 false。

     <wui-date-picker
        :show="show"
        :type="type"
        :range="range"
        :value="defaultVal"
        :valueEnd="valueEnd"
        @change="change"
        @cancel="cancel"
>
</wui-date-picker>

const show = ref<any>(false);
const result = ref<any>('');
  const change = e => {
    show.value = false;
    console.log(e);
    result.value = JSON.stringify(e || {});
};
const cancel = () => {
    show.value = false;
};

日期区间选择

通过 range 属性设置是否为区间选择，show 属性控制选择器显示隐藏，type 属性设置选择日期时间类型，@change 为确定按钮触发事件，返回选择值，@cancel 为取消按钮或遮罩触发事件，将 show 属性设置为 false。

<wui-date-picker range :show="show" type="3" @change="change" @cancel="cancel"></wui-date-picker>

const show = ref<any>(false);
const result = ref<any>('');
const change = e => {
    show.value = false;
    console.log(e);
    result.value = JSON.stringify(e || {});
};
const cancel = () => {
    show.value = false;
};

设置默认值

通过 value 属性设置选择器默认显示的值（注：区间选择时，结束日期默认值使用属性 valueEnd 设置），show 属性控制选择器显示隐藏，type 属性设置选择日期时间类型，@change 为确定按钮触发事件，返回选择值，@cancel 为取消按钮或遮罩触发事件，将 show 属性设置为 false。

<wui-date-picker :value="value" :show="show" type="5" @change="change" @cancel="cancel"></wui-date-picker>

    //默认值，区间选择时起始值使用属性：value，结束值使用属性：valueEnd
defaultVal.value = def ? '2021-11-22 11:12' : '';
const show = ref<any>(false);
const result = ref<any>('');
const change = e => {
    show.value = false;
    console.log(e);
    result.value = JSON.stringify(e || {});
};
const cancel = () => {
    show.value = false;
};

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值	平台差异说明
show	Boolean	是否显示选择器	false	-
type	Number, String	日期时间类型，可选值：1-年 2-年月 3-年月日 4-年月日 时 5-年月日 时分 6-时分 7-时分秒 8-分秒	1	-
value	String	默认选中的值（区间选择时为起始日期或时间默认值），日期格式字符串（当type=1时为年份值），如：2021（type=1）、2021-12-12、2021-12-12 10:00 等	-	-
valueEnd	String	结束日期默认选中的值,仅区间选择时有效，格式同 value	-	-
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	range 为 true时有效，起始按钮的默认文本	起始日期	-
end	String	range 为 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	Nvue端V1.9.5+支持，且Hbuilder x 3.6.7+有效
maskClosable	Boolean	点击遮罩是否可关闭，为true时点击触发 @cancel 事件	true	-
maskBackground	String	遮罩背景色	rgba(0,0,0,.6)	-
zIndex	Number, String	选择器层级z-index值	999	Nvue端不支持，默认越靠后的元素层级越高
isClose	Boolean	点击确定按钮后是否立即关闭弹框，为false时需自行关闭（需要对选择值进行校验时候可使用）	true	-
param	Number, String	自定义参数，通过事件回传	0	-

Events

事件名	说明	回调参数
@change	点击确认按钮时触发	具体数据格式见下方说明
@cancel	点击取消按钮或遮罩（maskClosable = true）时触发	{ param:自定义参数 }

// @change 事件回调参数

// 第一种，非区间选择时 range = false

{
	//年，根据type类型判断是否返回
	year,
	//月，根据type类型判断是否返回
	month,
	//日，根据type类型判断是否返回
	day,
	//时，根据type类型判断是否返回
	hour,
	//分，根据type类型判断是否返回
	minute,
	//秒，根据type类型判断是否返回
	second,
	//选择值组合
	result,
	//自定义传入的参数
	param
}

// 第二种，区间选择时 range = true

{
	//起始日期时间，内部属性参数同上
	startDate:{
		year,
		month,
		day,
		hour,
		minute,
		second,
		result,
		param
	},
	//结束日期时间，内部属性参数同上
	endDate:{
		year,
		month,
		day,
		hour,
		minute,
		second,
		result,
		param
	}
}

Methods

通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过 this.$refs.XXX 访问到对应的组件实例，并调用上面的实例方法。

方法名	说明	传入参数	返回参数
reset	重置选择器选项	-	-
open	打开选择器（除了使用属性 show 控制显示隐藏，也可以调用此方法显示）	-	-
close	关闭选择器（除了使用属性 show 控制显示隐藏，也可以调用此方法关闭）	-	-