Calendar 日历
日历组件,月/年两种模式,支持选中、禁用日期、周号与键盘网格导航;日期描述走 Intl.DateTimeFormat(locale 感知)。
基础用法
月视图(mode=month)
点击日期选中并派发 oas-change;标题可点开月选择面板快速跳月。
年视图
年视图(mode=year)
年模式选中月份派发 yyyy-MM。
禁用范围
min / max 限制
禁用回调
disabled-date(禁用周末)
disabledDate 走 property 传入回调(JSON 无法表达函数)。
周号
显示周号(show-week-number)
事件
oas-change 事件
自定义单元格
事件标记日历(oas-cell-render 标记节假日)
每个日单元格渲染时派发 oas-cell-render(detail: { date, element }),宿主可在单元格内追加标记/徽标/富文本(如节假日、事件点);也可在组件内放 <template slot="cell"> 提供静态骨架,[data-cell-date] 节点自动绑定日期数字。element 内追加 <span class="cell-dot"> 即显示内置标记点(--oas-color-danger token,明暗主题自适应)。
模式切换
模式切换(month ↔ year 快速跳年)
mode="year" 显示 12 个月网格,标题栏「上一年/下一年」按钮快速切换年份;点击月份选中(派发 oas-change,value 为 yyyy-MM)并自动切回月视图(派发 oas-mode-change)。受控场景监听 oas-mode-change 后重新设置 mode 属性即可保持指定模式。
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
disabledDate | 禁用回调(property) | ((d: Date) => boolean) | null | — |
max | 可选范围(ISO 日期) | string | — |
min | 可选范围(ISO 日期) | string | — |
mode | month / year(年模式选中月份后自动切回月视图) | string | month |
show-week-number | 显示 ISO 周号列 | boolean | — |
value | 选中值(ISO) | string | — |
事件
| 事件 | 说明 |
|---|---|
oas-cell-render | 每个日单元格渲染时派发,detail: { date, element }(element 为日按钮,宿主可追加标记/徽标/富文本) |
oas-change | 选中变化,detail: { value } |
oas-mode-change | 年模式选中月份自动切回月视图时派发,detail: { mode } |
插槽
| 名称 | 说明 |
|---|---|
template[slot="cell"] | 日单元格静态模板,克隆到每个日按钮;[data-cell-date] 节点自动绑定日期数字 |
键盘:↑/↓/←/→ 在网格内移动,Enter 选中。