Calendar 日历，用于选择日期区间。支持单选、多选、区间选择。

支持平台

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

代码演示

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

单个日期选择 (更改对应日期的文字和颜色)

通过 @change 事件接收选择数据。

<wui-calendar @change="change" @formatter=formatter></wui-calendar>

//通过value属性设置默认值
//单个日期选择默认值设置格式如：'2023-07-01' 或 ['2023-07-20']
change(e) {
    console.log(e)
    Toast(e.value)
},
formatter(day){
    if(day.date==='YYYY-MM-DD') {
        day.text = '有号';
        day.color = '#0C92FF';
    }
    return day;
};

多个日期选择/显示农历

通过 type 属性设置选择类型，showLunar 属性设置是否显示农历。

区间选择

通过 type 属性设置选择类型，showLunar 属性设置是否显示农历。

<wui-calendar type="3" showLunar @change="change"></wui-calendar>

//通过value属性设置默认值
//区间选择默认值设置格式如：['2021-12-01','2021-12-31']
change(e) {
    console.log(e)
}

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值	平台差异说明
type	Number, String	日期选择类型，可选值：1-单个日期选择，2-多个日期选择 3-日期区间选择	1	-
formatter	Function	日期格式化函数	null	-
value	Array, String	默认值，根据类型不同传对应格式数据，具体见下方说明	[ ]	-
minDate	String	最小可选日期	2010-01-01	-
maxDate	String	最大可选日期	2030-12-31	-
showLunar	Boolean	是否显示农历，当language为en时无效	false	-
language	String	语言：可选值：cn/en，可配置的内容需要自行处理	cn	-
isMultiple	Boolean	是否一次加载一年的日历数据，为true时可上下或左右滑动切换月份	true	-
vertical	Boolean	是否垂直方向切换月份，为false则水平切换	true	-
width	Number, String	日历宽度，单位rpx，低于600时无效（默认使用屏幕宽度）	0	-
background	String	日历背景色	#FFFFFF	-
name	String	切换年份箭头icon的name值，可选值：roundright-fill、roundright、arrowright等，具体可参考icon组件	roundright-fill	-
arrowSize	Number, String	icon箭头的字体大小，单位rpx	40	-
arrowColor	String	icon箭头的字体颜色	#7F7F7F	-
yearsWidth	Number, String	年月标题的宽度，单位rpx	200	-
yearsSize	Number, String	年月标题的字体大小，单位rpx	32	-
yearsColor	String	年月标题的字体颜色	#181818	-
titleColor	String	星期标题的字体颜色	#181818	-
lineColor	String	星期标题底部线条颜色	#EEEEEE	-
color	String	默认日期字体颜色	#181818	-
activeColor	String	选中日期字体颜色	#FFFFFF	-
activeBackground	String	选中日期背景色	#465CFF	-
rangeColor	String	区间内日期字体颜色，仅type=3有效	#465CFF	-
rangeBackground	String	区间内日期背景颜色，仅type=3有效	#F1F4FA	-
start	String	区间选择时，起始日期显示文本	开始	-
end	String	区间选择时，结束日期显示文本	结束	-
isToday	Boolean	是否显示今天文本	true	-
disabled	Boolean	是否仅展示，禁用选择	false	-
showBtn	Boolean	是否显示底部按钮。显示时，点按钮才可触发@change事件	false	-
btnText	String	按钮文本	确定	-
btnBackground	String	按钮背景色	#465CFF	-
btnColor	String	按钮字体颜色	#FFFFFF	-