Skip to content

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-renderdetail: { 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
modemonth / year(年模式选中月份后自动切回月视图)stringmonth
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 选中。

基于 MIT OR Apache-2.0 双许可发布