小程序日歷組件

日歷組件，表單組件絕逼是前端開發(fā)的一個噩夢，尤其要做好一個旅游項(xiàng)目的日歷，變態(tài)需求特別多，要在小程序中實(shí)現(xiàn)攜程app的日歷，還要兼顧性能問題。

 

 

• 自定義橫向/縱向日歷
• 自定義區(qū)間大小
• 自定義日期內(nèi)容
• 指定節(jié)假日
• 支持跨月顯示

難點(diǎn)

• 懶加載保證渲染性能
• 通過配置實(shí)現(xiàn)縱向日歷和橫向日歷
• 陽歷節(jié)日與農(nóng)歷節(jié)日與節(jié)氣
• 交互，尤其是區(qū)域選擇的交互

---

示例代碼

https://github.com/webkixi/aotoo-xquery 
=> pages/calendar    
復(fù)制代碼

配置說明

wxml

<ui-calendar dataSource="{{config}}" />
復(fù)制代碼

js

基本用法

const Pager = require('../../components/aotoo/core/index')
Pager({
  data: {
    config: {
      $$id: 'calendar',
      mode: 1,  // 縱向日歷
      type: 'range',  // 區(qū)域選擇
      tap: 'onTap', // page響應(yīng)事件
      total: 365, // 定義從今天開始一年事件
      rangeCount: 28,  // 區(qū)選區(qū)間28天
      festival: true, // 開啟節(jié)假日顯示
      value: ['2019-12-24', '2020-01-05'],  // 默認(rèn)值
      methods: { 
        // 響應(yīng) tap事件
        onTap(e, param, inst) {
          if (param.range === 'start') {
            inst.update({dot: [{title: '入住'}]})
          }
          if (param.range === 'end') {
            inst.update({dot: [{title: '離店'}]})
            setTimeout(() => {
              Pager.alert('離店，跳回頁面')
            }, 1000);
          }
          console.log(param);
        }
      }
    }
  }
})
復(fù)制代碼

$$id
{String} 配置實(shí)例的Id

mode {Number} 設(shè)置日歷的展示模式，1=縱向日歷 2=橫向日歷

type {Number} single=單選日歷， range=選擇區(qū)間， multiple=多選日歷

total
{Number} 設(shè)置日歷從今天開始起需要跨多少天，如 180天，或者365天

start {String} 設(shè)置起始日期，如：'2020-06-05'

date
{Object|Function} 定義附加日期內(nèi)容

disable
{Boolean} 設(shè)置全局無效，所有日期均不能交互，權(quán)重低于單個日期設(shè)置的disable

rangeCount
{Number} 當(dāng)type === 'range'時，rangeCount為區(qū)間大小，意味著區(qū)間允許選擇多少天

rangeMode
{Number} 當(dāng)正在做日期區(qū)間選擇時，是否允許顯示angeCount之外的日期 1=顯示， 2=不顯示

tap {String} 響應(yīng)日期元素的tap事件

value
{Array} 默認(rèn)選中的日期，允許數(shù)組為空，如果type='single'則應(yīng)該設(shè)置如['2020-06-05']，type='range'應(yīng)該設(shè)置如['2020-06-03', '2020-06-05'], type='multiple'時，數(shù)組允許多值

data
{Array} 該數(shù)據(jù)會自動計算日期跨度數(shù)量(允許跨年設(shè)置)，如果設(shè)置了該數(shù)據(jù)，則total無效，如設(shè)置為['2019-11-05', '2021-11-05']，自動計算日期為730天

festival
{Boolean|Array} 設(shè)置日歷假期顯示，支持顯示指定假期

toolbox
{Object} 日歷的擴(kuò)展配置，允許設(shè)置一些高級功能，如日歷是否允許跨月，特殊的range算法等等

toolbox.header
{Boolean} 是否顯示日歷的頭部，一般用于橫向日歷時為true

toolbox.monthHeader
{Boolean} 是否顯示日歷的月頭部，一般在縱向日歷時為true

toolbox.rangeEdge
{Function} 默認(rèn)值null，type='range'時，自定義range選擇算法

toolbox.discontinue
{Boolean} 默認(rèn)false，當(dāng)日歷有data數(shù)組構(gòu)建時，缺少數(shù)據(jù)的月份會被忽略

如何設(shè)置

設(shè)置橫向、縱向日歷

let calenderConfig = {
  $$id: 'calendar',
  mode: 2, // 1，縱向日歷 2，橫向日歷
  type: 'single', // single：單選  range: 區(qū)間選擇  multiple：多選
  tap: 'onTap', // 回調(diào)事件
  total: 180, // 所有日期選擇天數(shù)
  methods: { // 響應(yīng)方法
    onTap(e, param, inst) {
      console.log(param);
    }
  }
}
復(fù)制代碼

設(shè)置區(qū)間選擇日歷

該示例配置為仿攜程的功能設(shè)置

let calendarConfig = {
  $$id: 'calendar',  //實(shí)例id
  mode: 1,  // 縱向日歷
  type: 'range',  // 區(qū)間選擇日歷
  tap: 'onTap', // tap響應(yīng)方法
  total: 365,  // 指定日歷從今天開始總天數(shù)
  rangeCount: 28, // 區(qū)間范圍
  rangeMode: 1, // 區(qū)間選擇是否隱藏非區(qū)間的月份
  festival: true, // 是否顯示節(jié)假日
  value: ['2020-04-03', '2020-04-09'],  // 默認(rèn)值
  methods: { 
    // 定義響應(yīng)方法  
    onTap(e, param, inst) {
      
      if (param.range === 'start') {  // 第一次點(diǎn)擊時
        inst.update({dot: [{title: '入住'}]})
      }
      if (param.range === 'end') { // 第二次點(diǎn)擊時
        inst.update({dot: [{title: '離店'}]})
      }
      console.log(param);
    }
  }
}
復(fù)制代碼

設(shè)置多選日歷

支持選中多個日期

let calenderConfig = {
  $$id: 'calendar',
  mode: 2,
  type: 'multiple', // single：單選  range: 區(qū)間選擇  multiple：多選
  tap: 'onTap', // 回調(diào)事件
  total: 180, // 所有日期選擇天數(shù)
  value: ['2020-04-03', '2020-04-09', '2020-04-10'],
  methods: { // 響應(yīng)方法
    onTap(e, param, inst) {
      console.log(param);
    }
  }
}
復(fù)制代碼

據(jù)已知日期自動構(gòu)建

此例中total無效，由兩個給定的日期構(gòu)建了三個月的日歷

let calenderConfig = {
  $$id: 'calendar',
  mode: 2, // 1，縱向日歷 2，橫向日歷
  type: 'single', // single：單選  range: 區(qū)間選擇  multiple：多選
  tap: 'onTap', // 回調(diào)事件
  total: 180, // 所有日期選擇天數(shù)，此例中無效  
  data: [{"date":"2020-04-03"}, {"date":"2020-06-03"}],
  methods: { // 響應(yīng)方法
    onTap(e, param, inst) {
      console.log(param);
    }
  }
},
復(fù)制代碼

根據(jù)已知日期自動構(gòu)建，忽略無數(shù)據(jù)月份

此例中total無效， 由兩個給定的日期構(gòu)建了三個月的日歷

let calenderConfig = {
  $$id: 'calendar',
  mode: 2, // 1，縱向日歷 2，橫向日歷
  type: 'single', // single：單選  range: 區(qū)間選擇  multiple：多選
  tap: 'onTap', // 回調(diào)事件
  total: 180, // 所有日期選擇天數(shù)，此例中無效
  data: [{"date":"2020-04-03"}, {"date":"2020-06-03"}],
  toolbox: {
    discontinue: true // 允許構(gòu)建跨月日歷
  },
  methods: { // 響應(yīng)方法
    onTap(e, param, inst) {
      console.log(param);
    }
  }
},
復(fù)制代碼

構(gòu)建節(jié)假日日歷

允許指定節(jié)假日，指定節(jié)假日內(nèi)容

• festival: true 顯示所有組件自帶節(jié)日

• festival: ['元旦節(jié)', '情人節(jié)', '勞動節(jié)', '冬至']
  顯示指定假日

• festival: [{title: '春節(jié)', content: {dot: ['新年好']}}]
  顯示指定節(jié)日，并附加內(nèi)容

let calenderConfig = {
  $$id: 'calendar',
  mode: 1, // 1，縱向日歷 2，橫向日歷
  type: 'single', // single：單選  range: 區(qū)間選擇  multiple：多選
  tap: 'onTap', // 回調(diào)事件
  data: [{"date":"2020-09-03"}, {"date":"2020-12-28"}],
  festival: ['教師節(jié)', '圣誕節(jié)'],
  toolbox: {
    discontinue: true // 允許忽略無數(shù)據(jù)月份
  },
  methods: { // 響應(yīng)方法
    onTap(e, param, inst) {
      console.log(param);
    }
  }
},
復(fù)制代碼

自定義日期內(nèi)容

自定義日期內(nèi)容有兩種方法

• 在data數(shù)據(jù)配置中加入'dot'數(shù)組屬性
  config.data = [{date: '2020-03-03', content: {dot: ['內(nèi)容']}}]

• 在date屬性中配置

// 配置所有日期的附加內(nèi)容   
config.date = {dot: ['自定義內(nèi)容']}  

// 指定日期內(nèi)容配置   
config.date = function(param){
  // 通過param的屬性寫邏輯 param.date, param.year, param.month, param.day ...
  if (param.date === '2020-8-13') {
    param.dot = ['附加內(nèi)容']
    return param
  }
}
復(fù)制代碼

設(shè)置示例

let calenderConfig = {
  $$id: 'calendar',
  mode: 2, // 1，縱向日歷 2，橫向日歷
  type: 'single', // single：單選  range: 區(qū)間選擇  multiple：多選
  tap: 'onTap', // 回調(diào)事件
  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: { // 響應(yīng)方法
    onTap(e, param, inst) {
      console.log(param);
    }
  }
},
復(fù)制代碼

GITHUB源碼

示例小程序