评论

多形态小程序日历组件,轻松搞定项目需求

要做好一个旅游项目的日历,产品的收货标准只有一条,`你看携程都实现了哦`, MMP的。要在小程序中实现携程app的日历,即要兼顾性能问题,还要实现很多产品非常非常合理的需求。

小程序日历组件

小程序日历组件,支持多种模式,简单易用好上手。

  • 4种日历模式
  • 3种日期选择方式
  • 支持自定义节假日
  • 支持自定义日期内容
  • 懒加载保证渲染性能
  • 支持农历
  • 支持根据指定日期自动生成
  • 支持跨无数据月份

日历组件基础配置

wxml模板

<ui-calendar dataSource="{{config}}" />

配置日历组件

Pager({
  data: {
    source: {
      $$id: 'calendar',
      mode: 1,  // 纵向日历
      type: 'range',  // 区域选择
      tap: 'onTap', // page响应事件
      total: 365, // 指定日历总天数
      data: [], // 按给定日期计算total值,自动构建日历
      rangeCount: 28,  // 区选区间28天
      rangeMode: 2, // 区选模式
      rangeTip: ['入住', '离店'], // 区选提示  
      festival: true, // 开启节假日显示
      alignMonth: false, // 月份对齐,swiper切换时
      lunar: false, // 是否显示农历
      date: [], // 指定日期显示的内容
      value: ['2019-12-24', '2020-01-05'],  // 默认值
      toolbox: {
          monthHeader: true, // 是否显示月头
          discontinue: false, // 自动构建时,是否省略无数据的月份
      },
      methods: { 
        // 响应 tap事件
        onTap(e, param, inst) {
          // param.date 选中的当前日期
          
          // 当区选模式时
          // param.range === 'start' 区选第一天
          // param.range === 'end' 区选最后一天
        }
      }
    }
  }
})

github地址:https://github.com/webkixi/aotoo-xquery

小程序demo演示

最后一次编辑于  2020-06-30  
点赞 5
收藏
评论

8 个评论

  • 雨夜不撑伞
    雨夜不撑伞
    2020-09-27

    默认到今天日期,怎么显示高亮,而不需要点击的时候才高亮

    2020-09-27
    赞同
    回复
  • XZ
    XZ
    2020-08-15

    使用这个日历组件的时候提示$page is not a function,但是我的调试基础库已经2.11.2了,这是为什么呢?

    2020-08-15
    赞同
    回复 1
    • 天天修改
      天天修改
      2020-08-16
      感觉是你配置错了
      2020-08-16
      回复
  • 此时
    此时
    2020-06-09

    苹果手机,一进去还是无法加载出当前日期的上一个月

    2020-06-09
    赞同
    回复 1
    • 天天修改
      天天修改
      2020-06-09
      推了新版了,再试试
      2020-06-09
      回复
  • 此时
    此时
    2020-06-05

    可以显示农历吗?

    2020-06-05
    赞同
    回复 22
    • 此时
      此时
      2020-06-08回复天天修改
      加载当前值上一个月份,为什么要滑到上上个月份,才会出来啊
      2020-06-08
      回复
    • 天天修改
      天天修改
      2020-06-08
      有一个属性设定允许跨月discontinue,没有数据就跳过
      2020-06-08
      回复
    • 天天修改
      天天修改
      2020-06-08
      配置lunar=true显示农历日期
      2020-06-08
      回复
    • 天天修改
      天天修改
      2020-06-08回复此时
      mode=4的场景下,可能有个bug,尽快修复
      2020-06-08
      回复
    • 此时
      此时
      2020-06-08回复天天修改
      比如默认选中今天2020-06-08,当我往上翻的时候,5月份的日历不会出来,除非我翻到4月份再往下翻才有
      2020-06-08
      回复
    查看更多(17)
  • zpwan
    zpwan
    2020-04-17

    不能显示当月以前的日期吗

    2020-04-17
    赞同
    回复 1
    • 天天修改
      天天修改
      2020-04-17
      这个没做
      2020-04-17
      回复
  • 吴鸿
    吴鸿
    2020-04-05

    支持taro吗。

    2020-04-05
    赞同
    回复
  • 龙风
    龙风
    2019-12-24

    非常好,已经收藏工具小程序,赞

    2019-12-24
    赞同
    回复
  • 英忠通信
    英忠通信
    2019-12-24

    好项目出好技术,赞

    2019-12-24
    赞同
    回复
登录 后发表内容