github:https://github.com/xiaoyangyang-code/calendar
码云:https://gitee.com/xiaoyang688/calendar
先看一下大概样式 默认选中为今天:
image.png
单选模式:
image.png
双选模式 isDoubleSelection=true:
image.png
功能说明: 支持双选或单选日期或开始日期和结束日期的选择!
正好公司做火车票飞机票以及酒店的小程序项目!
需求要求: 可以单选或订往返的票 所以 我自己根据需求封装了一个组件!使用起来也比较简单,不用看我的代码逻辑,页面上引用直接使用!需要更改选中样式的话,去wxss里去改一下就行了
小程序日历组件
组件传值介绍
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| monthCount | Number | 6 | 否 | 从当前月数起,往后生成N个月的日历数据;默认6个月 |
| isCurrentMonth | Boolean | true | 否 | 生成的日历开始月份是否包含本月,默认包含本月 |
| isDisable | Boolean | false | 否 | 是否开启日历尾部时间禁用,默认从当前日期开始后的45天 |
| disNumDay | Number | 45 | 否 | isDisable属性如果为true,从今天起 disNumDay 天之后的日期禁用默认45天 |
| isDoubleSelection | Boolean | false | 否 | 是否开启日期双选模式开始与结束时间,默认单选模式:即只选择一个日期 |
| change | function | 是 | 子组件通信父组件时的事件,单选双选都需要将选中的值保存给父组件 |
