uniapp开发app框架在提升开发效率中的独特优势与应用探索
2211
2022-10-09
微信小程序uniapp日历组件
微信小程序uniapp日历组件
ei-calendar(v1.0.1)
组件功能
日历功能向下滑动禁用日期双向绑定类型 单选多选范围 自定义日期事件 click事件closesubmit
组件API设计
ei-calendar Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| visible | 是否显示日历 | boolean | — | false |
| type | 日历类型 | string | range（范围）/multiple（多选)/single(单选) | single |
| value / v-model | 绑定值 | date/string(single) array(range/multiple) | — | — |
| disabled | 禁用（不显示确定按钮） | boolean | — | false |
| disabledDate | 设置禁用日期 参数为当前日期，要求返回 Boolean（function） | array/function | — | — |
| customDate | 设置自定义选中的日期，每个选中值的数据可为string（默认样式为右上角红色的点）或object，object方式，可为选中的日期添加自定义的文本跟样式，object属性具体参考下表（function的话只能返回object[]，参数为当前日期） | array/function | — | — |
| format | 返回日期格式，如果为空范围date | string | YYYY/MM/DD/hh/mm/ss/a组合 | — |
| title | 标题 | — | 请选择日期 | |
| drawer | 是否弹出层弹出 | boolean | — | true |
selectedDate
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| cellClass | 自定义cell类名 | string | — | — |
| date | 自定义日期（YYYY-MM-DD) | string | — | — |
| top/center/bottom | 显示的位置 | [] | — | — |
| {top/center/bottom.class} | 自定义类 | string | — | — |
| {top /bottom.text} | 自定义文本 | string | — | — |
const customDate = [ { cellClass: 'custom-cell', date: '2019-05-19', top: [ { class: 'custom-cell-top-1', text: 'custom1' }, ... ], center: [...], botoom: [...] }]
ei-calendar Methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| refresh | 更新customDate并重新计算当前显示月份的数据 | — |
通过ref调用 this.$refs.calendar.refresh();需要动态修改customDate的话，drawer = trure弹出层模式下，每次打开都会重新计算，所以不需要做什么修改，非弹出层模式下，调用this.$refs.calendar.refresh();进行刷新
ei-calendar Events
demo
1、单选
2、多选
3、范围
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~