日历
WdCalendar
适用场景
用于日历数据的平铺展示,例如考勤数据展示、日程展示。
基础能力说明
展示配置属性中,可添加多个日期,将对应的日期进行置灰或打点标记

示例
交互式预览
属性
组件接收的外部传入的属性
属性名  | 属性标识  | 类型  | 说明  | 
|---|
| 展示年月 | initMonth | number | |
| 选中日期 | value | number | |
| 最早可选日期 | start |  | |
| 最晚可选日期 | end |  | |
| 展示配置 | configData | array | 可设置多个不同日期的特殊显示效果 默认值:[]  | 
| 时间控制器 | initVisible | boolean | 显示切换年月的操作按钮 默认值:true  | 
事件
组件暴露的事件,可以监听组件的事件来触发一些外部的动作
事件名  | 事件code  | 事件出参 event.detail  | 适用情况  | 说明  | 
|---|
| 选中日期 | change | object   
  | 兼容三端 |   -  | 
| 年月切换 | changeMonth | object   
  | 兼容三端 |   -  | 
属性 API
通过属性 API,可以获取组件内部的状态和属性值,可以通过$w.componentId.propertyName 来访问组件内部的值,如 $w.input1.value ,详请请参考 属性 API
只读属性名  | 属性标识  | 类型  | 说明  | 
|---|
| 展示年月 | initMonth | number | |
| 选中日期 | value | number | |
| 展示配置 | configData | array | 可设置多个不同日期的特殊显示效果  | 
| 时间控制器 | initVisible | boolean | 显示切换年月的操作按钮  | 
方法 API
通过方法 API,可以通过程序触发组件内部的方法,比如提交表单,显示弹窗等, 可以通过$w.componentId.methodName来调用组件方法,如 $w.form1.submit()
方法名  | 方法标识  | 参数  | 方法说明  | 
|---|
| 设置选中日期 | setValue | number日期    | 通过 $w.id1.setValue(1688140800000) 设置选中日期  | 
| 切换年月 | setInitMonth | number年月    | 通过 $w.id1.setInitMonth(1688140800000) 切换年月  |