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


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 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
javascript数组快速打乱重排的方法
Jan 02 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
ECMAScript 5中的属性描述符详解
Mar 02 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
Vue实现PopupWindow组件详解
Apr 28 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 Javascript
vant时间控件使用方法详解
Dec 24 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程序的国际化实现方法(利用gettext)
2011/08/14 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
php变量与JS变量实现不通过跳转直接交互的方法
2017/08/25 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
js获取php变量的实现代码
2013/08/10 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
JavaScript中原型链存在的问题解析
2016/09/25 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
JavaScript中object和Object的区别(详解)
2017/02/27 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
python判断windows隐藏文件的方法
2014/03/21 Python
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
美国婴儿和儿童服装购物网站:PatPat
2020/10/01 全球购物
大一新生军训时的自我评价分享
2013/12/05 职场文书
房地产销售经理岗位职责
2014/01/01 职场文书
满月酒主持词
2014/03/27 职场文书
竞选卫生委员演讲稿
2014/04/28 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
2014年团总支工作总结
2014/11/21 职场文书
行为规范主题班会
2015/08/13 职场文书
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android
Elasticsearch 索引操作和增删改查
2022/04/19 Python