功能完善的小程序日歷組件的實現(xiàn)
小程序日歷組件
日歷組件，表單組件絕逼是前端開發(fā)的一個噩夢，尤其要做好一個旅游項目的日歷，變態(tài)需求特別多，要在小程序中實現(xiàn)攜程app的日歷，還要兼顧性能問題。
- 自定義橫向/縱向日歷
- 自定義區(qū)間大小
- 自定義日期內(nèi)容
- 指定節(jié)假日
- 支持跨月顯示
難點
- 懶加載保證渲染性能
- 通過配置實現(xiàn)縱向日歷和橫向日歷
- 陽歷節(jié)日與農(nóng)歷節(jié)日與節(jié)氣
- 交互，尤其是區(qū)域選擇的交互
示例代碼
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', // 區(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);
}
}
}
}
})$$id
{String} 配置實例的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);
}
}
}設(shè)置區(qū)間選擇日歷
該示例配置為仿攜程的功能設(shè)置
let calendarConfig = {
$$id: 'calendar', //實例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') { // 第一次點擊時
inst.update({dot: [{title: '入住'}]})
}
if (param.range === 'end') { // 第二次點擊時
inst.update({dot: [{title: '離店'}]})
}
console.log(param);
}
}
}設(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);
}
}
}據(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);
}
}
},根據(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);
}
}
},構(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);
}
}
},自定義日期內(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
}
}設(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);
}
}
},示例小程序
到此這篇關(guān)于功能完善的小程序日歷組件的實現(xiàn)的文章就介紹到這了,更多相關(guān)小程序日歷組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
2008年有啊第一次性能優(yōu)化時，我們曾用textarea來存貯需要懶惰渲染的節(jié)點2012-01-01
javascript使用avalon綁定實現(xiàn)checkbox全選
checkbox全選應(yīng)該是一個比較實用的前端技巧吧，很多時候我們都需要點擊一個checkbox，然后將所有的復(fù)選框自動全部選中，一些CMS系統(tǒng)的后臺中，使用本JS效果后，會大大增強了操作體驗，那么究竟是如何實現(xiàn)這一功能的呢？2015-05-05
JSONP跨域GET請求是一個常用的解決方案，下面我們來看一下JSONP跨域是如何實現(xiàn)的，并且探討下JSONP跨域的原理2014-03-03
JavaScript異步隊列進(jìn)行try?catch時的問題解決
這篇文章主要介紹了JavaScript異步隊列進(jìn)行try?catch時的問題解決,文章圍繞主題展開詳細(xì)的的相關(guān)內(nèi)容介紹，需要的朋友可以參考一下2022-07-07
JavaScript高仿支付寶倒計時頁面及代碼實現(xiàn)
在支付寶上我們經(jīng)常會見到支付寶倒計時功能，倒計時應(yīng)用非常廣泛，下文給大家介紹js制作支付寶倒計時功能，但是里面涉及到，倒計時，彈框，以及字體圖的相關(guān)知識，感興趣的朋友一起看看吧2016-10-10
使用JS實現(xiàn)在圖片上顯示左右箭頭的翻頁代碼.實例使用了javascript的onmousemove 事件,onmousemove 事件會在鼠標(biāo)指針移動時發(fā)生,感興趣的你可以參考下本文或許對你有所幫助2013-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序單選框組應(yīng)用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
詳解Javascript百度地圖接口開發(fā)文檔中的類和方法
最近在工作中在用laravel框架仿寫?zhàn)I了么外賣商城,于是學(xué)習(xí)了一下有關(guān)地圖接口相關(guān)的知識,以下是百步地圖接口開發(fā)文檔的一些類和方法的使用，需要的朋友們可以參考借鑒，下面來一起看看吧。2017-02-02
JavaScript通過Date-Mask將日期轉(zhuǎn)換成字符串的方法
這篇文章主要介紹了JavaScript通過Date-Mask將日期轉(zhuǎn)換成字符串的方法,涉及javascript日期、數(shù)組及字符串操作的相關(guān)技巧,需要的朋友可以參考下2015-06-06
淺談javascript 函數(shù)表達(dá)式和函數(shù)聲明的區(qū)別
javascript中聲明函數(shù)的方法有兩種:函數(shù)聲明式和函數(shù)表達(dá)式.究竟他們用起來有什么區(qū)別呢，今天就本著打破砂鍋問到底的精神，好好來說說這個讓人神魂顛倒的--函數(shù)聲明。2016-01-01