多形态小程序日历组件,轻松搞定项目需求
小程序日历组件
小程序日历组件,支持多种模式,简单易用好上手。
4种日历模式
3种日期选择方式
支持自定义节假日
支持自定义日期内容
懒加载保证渲染性能
支持农历
支持根据指定日期自动生成
支持跨无数据月份
[图片]
[图片]
[图片]
[图片]
[图片]
日历组件基础配置
wxml模板
[代码]<ui-calendar dataSource="{{config}}" />
[代码]
配置日历组件
[代码]Pager({
data: {
source: {
$$id: 'calendar',
mode: 1, // 纵向日历
type: 'range', // 区域选择
tap: 'onTap', // page响应事件
total: 365, // 指定日历总天数
data: [], // 按给定日期计算total值,自动构建日历
rangeCount: 28, // 区选区间28天
rangeMode: 2, // 区选模式
rangeTip: ['入住', '离店'], // 区选提示
festival: true, // 开启节假日显示
alignMonth: false, // 月份对齐,swiper切换时
lunar: false, // 是否显示农历
date: [], // 指定日期显示的内容
value: ['2019-12-24', '2020-01-05'], // 默认值
toolbox: {
monthHeader: true, // 是否显示月头
discontinue: false, // 自动构建时,是否省略无数据的月份
},
methods: {
// 响应 tap事件
onTap(e, param, inst) {
// param.date 选中的当前日期
// 当区选模式时
// param.range === 'start' 区选第一天
// param.range === 'end' 区选最后一天
}
}
}
}
})
[代码]
github地址:https://github.com/webkixi/aotoo-xquery
小程序demo演示
[图片]