前言
小程序里有需要使用到日历选择功能，由于官方没有对应的日历组件，所以我们最开始使用Picker实现了日期范围选择、限制的功能，但是由于UI达不到设计同学的要求，所以没办法，只能手动实现了。
效果图
接入方式
参考下市面上移动端的日历 UI样式及交互习惯，然后我们实现了这样的日历组件，功能单一，没有复杂交互，符合操作习惯。
首先页面JSON引入组件：
{ "defaultTitle": "日历范围选择器", "usingComponents": { "calendar": "/components/calendar/index" } }
然后页面axml使用组件：
<button size="default" type="primary" onTap="handleClick">打开日历选择</button> <calendar visible="{{calendarVisible}}" value="{{calendarValue}}" isTabbar onClose="handleClick" onConfirm="handleCalendarConfirm" /> <view style="width: 100%; margin-top: 100px; padding: 0 12px" a:if="{{calendarValue}}"> 您选择的日期是：{{calendarValue}} </view>
页面JS操作：
Page({ data: { calendarValue: '', // 日历默认日期 calendarVisible: false // 日历弹窗组件显示 }, handleClick() { this.setData({ calendarVisible: !this.data.calendarVisible }) }, handleCalendarConfirm(e) { this.setData({ calendarValue: e.value }) } });
开放属性内容
开放属性 |
属性类型 |
默认值 |
描述 |
type |
String |
range |
single表示单选，range表示选择日期区间, 暂时只支持范围选择，单选的内部逻辑已保留，可基于源码进行二次开发 |
monthTranslate |
Object |
{} |
日历上特殊日期加红蓝小圆点 |
visible |
Boolean |
false |
日历弹窗显隐藏 |
isTabbar |
Boolean |
false |
tabbar页面不需要底部安全区域的高度 |
bgColor |
String |
#FFFFFF |
日历弹窗区域背景颜色,默认白色 |
limitTime |
Number |
90 |
限制用户只能选择从当天开始往后90天 |
value |
String |
‘2023-01-01,2023-01-08’ |
默认选中值|回填日历选中的值 |
onChangeTime |
Function |
{showYear: 2024, showMonth: 1} |
获取显示时的年月 |
onGetCalendarTime |
Function |
{startTime: '2024-01-02', endTime: '2024-01-11'} |
点击选择日期时，获取到的日期 |
组件只是给大家提供个思路，未做更多功能，目前符合我们的业务需求，不适合你们的业务的话就需要你们进行二次开发了。
