功能完善的小程序日历组件

小程序日历组件

小程序日历组件，支持多种模式，简单易用好上手

• 4种日历模式
• 3种日期选择方式
• 支持自定义节假日
• 支持自定义日期内容
• 懒加载保证渲染性能
• 支持农历
• 支持根据指定日期自动生成
• 支持跨无数据月份

1

2

3

---

示例代码

https://github.com/webkixi/aotoo-xquery 
=> pages/calendar    

配置说明

wxml

<ui-calendar dataSource="{{config}}" />

js

基本用法

const Pager = require('../../components/aotoo/core/index')
Pager({
  data: {
    config: {
      ?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' 区选最后一天
        }
      }
    }
  }
})

$$id
{String} 配置实例的Id

mode {Number} 设置日历的展示模式，1=纵向日历 2=横向日历

type {Number} single=单选日历， range=选择区间， multiple=多选日历

total
{Number} 设置日历从今天开始起需要跨多少天，如 180天，或者365天

start {String} 设置起始日期，如：'2020-06-05'

date
{Object|Function} 定义附加日期内容

disable
{Boolean} 设置全局无效，所有日期均不能交互，权重低于单个日期设置的disable

rangeCount
{Number} 当type === 'range'时，rangeCount为区间大小，意味着区间允许选择多少天

rangeMode
{Number} 当正在做日期区间选择时，是否允许显示angeCount之外的日期 1=显示， 2=不显示

tap {String} 响应日期元素的tap事件

value
{Array} 默认选中的日期，允许数组为空，如果type='single'则应该设置如['2020-06-05']，type='range'应该设置如['2020-06-03', '2020-06-05'], type='multiple'时，数组允许多值

data
{Array} 该数据会自动计算日期跨度数量(允许跨年设置)，如果设置了该数据，则total无效，如设置为['2019-11-05', '2021-11-05']，自动计算日期为730天

festival
{Boolean|Array} 设置日历假期显示，支持显示指定假期

toolbox
{Object} 日历的扩展配置，允许设置一些高级功能，如日历是否允许跨月，特殊的range算法等等

toolbox.header
{Boolean} 是否显示日历的头部，一般用于横向日历时为true

toolbox.monthHeader
{Boolean} 是否显示日历的月头部，一般在纵向日历时为true

toolbox.rangeEdge
{Function} 默认值null，type='range'时，自定义range选择算法

toolbox.discontinue
{Boolean} 默认false，当日历有data数组构建时，缺少数据的月份会被忽略

GITHUB源码