小程式日曆元件

日曆元件，表單元件絕逼是前端開發的一個噩夢，尤其要做好一個旅遊專案的日曆，變態需求特別多，要在小程式中實現攜程app的日曆，還要兼顧效能問題。

• 自定義橫向/縱向日曆
• 自定義區間大小
• 自定義日期內容
• 指定節假日
• 支援跨月顯示

難點

• 懶載入保證渲染效能
• 通過配置實現縱向日曆和橫向日曆
• 陽曆節日與農曆節日與節氣
• 互動，尤其是區域選擇的互動

示例程式碼

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,// 定義從今天開始一年事件
   rangeCount: 28,// 區選區間28天
   festival: true,// 開啟節假日顯示
   value: ['2019-12-24','2020-01-05'],// 預設值
   methods: { 
    // 響應 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);
    }
   }
  }
 }
})

$$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陣列構建時，缺少資料的月份會被忽略

如何設定

設定橫向、縱向日曆

let calenderConfig = {
 $$id: 'calendar',mode: 2,// 1，縱向日曆 2，橫向日曆
 type: 'single',// single：單選 range: 區間選擇 multiple：多選
 tap: 'onTap',// 回撥事件
 total: 180,// 所有日期選擇天數
 methods: { // 響應方法
  onTap(e,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,inst) {
   
   if (param.range === 'start') { // 第一次點選時
    inst.update({dot: [{title: '入住'}]})
   }
   if (param.range === 'end') { // 第二次點選時
    inst.update({dot: [{title: '離店'}]})
   }
   console.log(param);
  }
 }
}

設定多選日曆

支援選中多個日期

let calenderConfig = {
 $$id: 'calendar',type: 'multiple',// 所有日期選擇天數
 value: ['2020-04-03','2020-04-09','2020-04-10'],methods: { // 響應方法
  onTap(e,inst) {
   console.log(param);
  }
 }
}

據已知日期自動構建

此例中total無效，由兩個給定的日期構建了三個月的日曆

let calenderConfig = {
 $$id: 'calendar',// 所有日期選擇天數，此例中無效 
 data: [{"date":"2020-04-03"},{"date":"2020-06-03"}],inst) {
   console.log(param);
  }
 }
},

根據已知日期自動構建，忽略無資料月份

此例中total無效， 由兩個給定的日期構建了三個月的日曆

let calenderConfig = {
 $$id: 'calendar',// 所有日期選擇天數，此例中無效
 data: [{"date":"2020-04-03"},toolbox: {
  discontinue: true // 允許構建跨月日曆
 },

構建節假日日曆

允許指定節假日，指定節假日內容

festival: true

顯示所有元件自帶節日

festival: ['元旦節','情人節','勞動節','冬至']

顯示指定假日

festival: [{title: '春節',content: {dot: ['新年好']}}]

顯示指定節日，並附加內容

let calenderConfig = {
 $$id: 'calendar',// 回撥事件
 data: [{"date":"2020-09-03"},{"date":"2020-12-28"}],festival: ['教師節','聖誕節'],toolbox: {
  discontinue: true // 允許忽略無資料月份
 },

自定義日期內容

自定義日期內容有兩種方法

在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',// 回撥事件
 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"},

GITHUB原始碼

示例小程式

到此這篇關於功能完善的小程式日曆元件的實現的文章就介紹到這了,更多相關小程式日曆元件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！