小程序日历组件

日历组件、表单组件绝对是前端开发的噩梦。特别是要做好旅游项目的日历，有很多异常需求。为了在小程序中实现携程app的日历，还应该考虑性能问题。

用户自定义水平/垂直日历用户自定义间隔大小用户自定义日期内容指定节假日支持跨月显示

难点

懒加载保证渲染性能；垂直和水平日历被配置为实现节气和农历节日和节气之间的交互。尤其是区域选择的交互

示例代码

https://github.com/webkixi/aotoo-xquery=页面/日历复制代码

配置说明

wxml

UI-日历数据源=' { { config } } '/复制代码

js

基本用法

常量寻呼机=要求('././components/aotoo/core/index ')寻呼机({ data : { config : } $ $ id : ' calendar '，mode: 1，//垂直日历类型： 'range '，//区域选择tap: 'onTap '，//页面响应事件总计3360 365，//从今天的事件开始定义一年rangeCount: 28，///区域选择间隔28天festival: true，//打开range==' start') {inst。更新({dot: [{title : '签入' }})} if (param。range==' end '){ inst . update({ dot :[{ title 3360 '签出' } } } } })setTimeout(()={ pager . alert('签出，跳回页面')}，1000)；} console . log(param)；}}}}}}})复制代码$$Id{String}配置实例的Id。

模式{Number}设置日历的显示模式，1=垂直日历2=水平日历。

键入{Number} single=单个日历，ra

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数组构建时，缺少数据的月份会被忽略

如何设置

设置横向、纵向日历

let calenderConfig = {  $$id: 'calendar',  mode: 2, // 1，纵向日历 2，横向日历  type: 'single', // single：单选  range: 区间选择  multiple：多选  tap: 'onTap', // 回调事件  total: 180, // 所有日期选择天数  methods: { // 响应方法    onTap(e, param, inst) {      console.log(param);    }  }}复制代码

设置区间选择日历

该示例配置为仿携程的功能设置

let calendarConfig = {  $$id: 'calendar',  //实例id  mode: 1,  // 纵向日历  type: 'range',  // 区间选择日历  tap: 'onTap', // tap响应方法  total: 365,  // 指定日历从今天开始总天数  rangeCount: 28, // 区间范围  rangeMode: 1, // 区间选择是否隐藏非区间的月份  festival: true, // 是否显示节假日  value: ['2020-04-03', '2020-04-09'],  // 默认值  methods: {     // 定义响应方法      onTap(e, param, inst) {            if (param.range === 'start') {  // 第一次点击时        inst.update({dot: [{title: '入住'}]})      }      if (param.range === 'end') { // 第二次点击时        inst.update({dot: [{title: '离店'}]})      }      console.log(param);    }  }}复制代码

设置多选日历

支持选中多个日期

let calenderConfig = {  $$id: 'calendar',  mode: 2,  type: 'multiple', // single：单选  range: 区间选择  multiple：多选  tap: 'onTap', // 回调事件  total: 180, // 所有日期选择天数  value: ['2020-04-03', '2020-04-09', '2020-04-10'],  methods: { // 响应方法    onTap(e, param, inst) {      console.log(param);    }  }}复制代码

据已知日期自动构建

此例中total无效，由两个给定的日期构建了三个月的日历

let calenderConfig = {  $$id: 'calendar',  mode: 2, // 1，纵向日历 2，横向日历  type: 'single', // single：单选  range: 区间选择  multiple：多选  tap: 'onTap', // 回调事件  total: 180, // 所有日期选择天数，此例中无效    data: [{"date":"2020-04-03"}, {"date":"2020-06-03"}],  methods: { // 响应方法    onTap(e, param, inst) {      console.log(param);    }  }},复制代码

根据已知日期自动构建，忽略无数据月份

此例中total无效， 由两个给定的日期构建了三个月的日历

let calenderConfig = {  $$id: 'calendar',  mode: 2, // 1，纵向日历 2，横向日历  type: 'single', // single：单选  range: 区间选择  multiple：多选  tap: 'onTap', // 回调事件  total: 180, // 所有日期选择天数，此例中无效  data: [{"date":"2020-04-03"}, {"date":"2020-06-03"}],  toolbox: {    discontinue: true // 允许构建跨月日历  },  methods: { // 响应方法    onTap(e, param, inst) {      console.log(param);    }  }},复制代码

构建节假日日历

允许指定节假日，指定节假日内容

• festival: true 显示所有组件自带节日

• festival: ['元旦节', '情人节', '劳动节', '冬至']显示指定假日

• festival: [{title: '春节', content: {dot: ['新年好']}}]显示指定节日，并附加内容

let calenderConfig = {  $$id: 'calendar',  mode: 1, // 1，纵向日历 2，横向日历  type: 'single', // single：单选  range: 区间选择  multiple：多选  tap: 'onTap', // 回调事件  data: [{"date":"2020-09-03"}, {"date":"2020-12-28"}],  festival: ['教师节', '圣诞节'],  toolbox: {    discontinue: true // 允许忽略无数据月份  },  methods: { // 响应方法    onTap(e, param, inst) {      console.log(param);    }  }},复制代码

自定义日期内容

自定义日期内容有两种方法

• 在data数据配置中加入'dot'数组属性config.data = [{date: '2020-03-03', content: {dot: ['内容']}}]

• 在date属性中配置

// 配置所有日期的附加内容   config.date = {dot: ['自定义内容']}  // 指定日期内容配置   config.date = function(param){  // 通过param的属性写逻辑 param.date, param.year, param.month, param.day ...  if (param.date === '2020-8-13') {    param.dot = ['附加内容']    return param  }}复制代码

设置示例

let calenderConfig = {  $$id: 'calendar',  mode: 2, // 1，纵向日历 2，横向日历  type: 'single', // single：单选  range: 区间选择  multiple：多选  tap: 'onTap', // 回调事件  date: function(param){    if (param.month === 12 && param.day === 26) {      param.dot = ['毛主席诞辰']      return param    }    if (param.month === 9 && param.day === 10) {      param.dot = [        {title: '生日', itemStyle: 'font-size: 11px; color: blue;'},        {title: '骗你的', itemStyle: 'font-size: 11px; color: #666'},      ]      return param    }    if (param.month === 9 && param.day === 20) {      param.dot = [        {title: '无效日期', itemStyle: 'font-size: 12px; color: red;'},        {title: '不能交互', itemStyle: 'font-size: 12px; color: #666;'},      ]      param.disable = true      return param    }  },  toolbox: {    discontinue: true  },  data: [{"date":"2020-09-03"}, {"date":"2020-12-28"}],  methods: { // 响应方法    onTap(e, param, inst) {      console.log(param);    }  }},复制代码

GITHUB源码

示例小程序