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


Posted in Javascript onMarch 31, 2020

小程序日历组件

日历组件,表单组件绝逼是前端开发的一个噩梦,尤其要做好一个旅游项目的日历,变态需求特别多,要在小程序中实现携程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, 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源码

示例小程序

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

到此这篇关于功能完善的小程序日历组件的实现的文章就介绍到这了,更多相关小程序日历组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
SWFObject Flash js调用类
Jul 08 Javascript
js中格式化日期时间型数据函数代码
Nov 08 Javascript
验证码按回车不变解决方法
Mar 29 Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
原生js实现移动端瀑布流式代码示例
Dec 18 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
Websocket协议详解及简单实例代码
Dec 12 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
基于BootStrap实现简洁注册界面
Jul 20 Javascript
Element InputNumber计数器的使用方法
Jul 27 Javascript
小程序双头slider选择器的实现示例
Mar 31 #Javascript
JavaScript实现电灯开关小案例
Mar 30 #Javascript
javascript实现计算器功能
Mar 30 #Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 #Javascript
记一次react前端项目打包优化的方法
Mar 30 #Javascript
12 种使用Vue 的最佳做法
Mar 30 #Javascript
javascript实现简易数码时钟
Mar 30 #Javascript
You might like
php编写一个简单的路由类
2011/04/13 PHP
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
javascript与jquery中的this关键字用法实例分析
2015/12/24 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
深入理解Python中字典的键的使用
2015/08/19 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
python3爬取torrent种子链接实例
2020/01/16 Python
pytorch中图像的数据格式实例
2020/02/11 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
网络体系结构及协议的定义
2014/03/13 面试题
人力资源本科毕业生求职信
2014/06/04 职场文书
欢迎词怎么写
2015/01/23 职场文书
作弊检讨书
2015/01/27 职场文书
寒山寺导游词
2015/02/03 职场文书
《灰雀》教学反思
2016/02/19 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL
《废话连篇——致新手》——chinapizza
2022/04/05 无线电