UNPKG

cloud-ui.vusion

Version:
68 lines (49 loc) 1.71 kB
# 日历 Calendar ## 示例 ### 基本形式 ``` html <u-calendar></u-calendar> ``` ### 只读和禁用 ``` html <u-linear-layout> <u-calendar date="2018-08-08" readonly style="display: inline-block"></u-calendar> <u-calendar date="2018-08-08" min-date="2017-08-08" max-date="2019-08-08" disabled style="display: inline-block"></u-calendar> </u-linear-layout> ``` ### 最大值最小值 ``` html <u-calendar date="2018-08-08" min-date="2018-08-02" max-date="2018-08-18"></u-calendar> ``` ### 增加展示年份 往前往后展示5年 ``` html <u-linear-layout> <u-calendar yearDiff="5" yearAdd="5" date="2018-08-08"></u-calendar> </u-linear-layout> ``` ## Calendar API ### Props/Attrs | Prop/Attr | Type | Default | Description | | --------- | ---- | ------- | ----------- | | date | Date/String | TODAY | 当前选择的日期 | | minDate | Date/String | | 最小日期,如果为空则不限制 | | maxDate | Date/String | `'text'` | 最大日期,如果为空则不限制 | | yearDiff | String/Number | `3` | 当前年份往前展示的年数,例:当前为`2018`年,则从`2015`年开始展示 | | yearAdd | String/Number | `1` | 当前年份往后展示的年数,例:当前为`2018`年,则展示至`2019`年 | | readonly | Boolean | `false` | 是否只读 | | disabled | Boolean | `false` | 是否禁用 | ### Slots #### (default) 插入文本或 `HTML` 至日期组件底部 ### Events #### @change 日期改变时触发 | Param | Type | Description | | ----- | ---- | ----------- | | date | Object | 改变后的日期 | #### @select 选择某一个日期时触发 | Param | Type | Description | | ----- | ---- | ----------- | | date | Object | 当前选择的日期 |