微信小程序：日历插件（极点日历）的使用

相关参考链接

• 一键搞定！小程序调用日历本该如此简单
• github

使用场景

根据开始日期和结束日期的范围在数据库进行查询。就需要用到日历插件。
主要操作都在链接里，此处只展示自己的实现。

相关代码

wxml

<!--选择开始时间-->
<view>
  <calendar calendar-style="calendar" header-style="header" board-style="board" binddayClick="dayClickStart" days-color="{{dayStyleStart}}"/>
</view>
<!--选择结束时间-->
<view">
  <calendar calendar-style="calendar" header-style="header" board-style="board" binddayClick="dayClickEnd" days-color="{{dayStyleEnd}}"/>
</view>

js

/**
   * 页面的初始数据
   */
  data: {
    //选择日期样式
    dayStyleStart: [],
    dayStyleEnd: [],
    //页面实现的开始与结束日期
    start_Day: 'Start',
    end_Day: 'End'
  },

/**
   * 点击日历某一天
   */
  dayClickStart: function(e){
    console.log("manage_dayClickStart")
    //定义date颜色数组
    let dayStyleStartTemp = new Array
    //初始化选中颜色
    //获取当前时间
    const year = e.detail.year
    const month = e.detail.month
    const day = e.detail.day
    var date = year + "/" + month + "/" + day
    //获取dayEnd,并比较
    var endDay = this.data.end_Day
    if (endDay != 'End' & date > endDay){
      wx.showToast({
        title: '开始时间选择错误',
        icon: 'none',
        duration: 2500
      })
    }else{
      //设置选中日期颜色
      dayStyleStartTemp.push(
        { month: 'current', day: day, color: 'white', background: '#aad4f5' },
      );
      this.setData({
        dayStyleStart: dayStyleStartTemp,
        start_Day: date
      })
    }
    console.log("date:"+date)
  },

实现效果

以上。