功能完善的小程序日历组件，php日历小插件

来源：未知 浏览 144次 时间 2021-06-10 15:53
小程序日历组件

日历组件表单组件绝逼是前端开发的一个噩梦尤其要做好一个旅游项目的日历快速排名尤其要做好一个旅游项目的日历变态需求特别多要在小程序中实现携程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} 设置起始日期网站点击快速排名或者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} 默认值nulltype='range'时自定义range选择算法

toolbox.discontinue
{Boolean} 默认false当日历有data数组构建时缺少数据的月份会被忽略

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); } } } 复制代码 设置多选日历

标签： 日期日历设置区间

上一篇: dev环境测试动态小码
下一篇: 微信小程序API封装经验

热门文章

最新文章

QQ咨询