微信小程序时间段日历（获取过去时间）

时间段日历（获取过去时间）

一、概要

工作中写了一个基于微信原生+TDesign部分ui的日历组件

该日历组件目的为时间段日历（获取过去时间）

日历组件地址：微信小程序时间段日历（获取过去时间）: 工作中写了一个基于微信原生+TDesign部分ui的日历组件该日历组件目的为时间段日历（获取过去时间）

二、样式展示

三、使用说明

index.json

//引入
{
  "usingComponents": {
    "calendar":"/componet/calendar/calendar"
  }
}

index.wxml

//获取customEvent事件传值，并拿calendarModal控制日历展开与否 ；starDate，endDate获取开始结束时间
<calendar bind:customEvent="selctItem" calendarModal="{{calendarModal}}" starDate="{{starDate}}" endDate="{{endDate}}"></calendar>

index.js

Page({
  data: {
    startDate: '',
    endDate: '',
    calendarModal:false,// 日历是否展示
​
  },
 
//获取组件参数
  selctItem(e) {
    let item= e.detail
    console.log(item);
    // 当事件触发时执行相应操作，可以在这里处理 starttime 和 endtime 参数
   this.setData({
    startDate:item.starDate,
    endDate:item.endDate
   })
  },
​
  clickModal:function(){
    this.setData({
      calendarModal:true
    })
    console.log('545');
  }
​
​
​
})

四、使用技术（TDesign安装）

微信原生日历+弹框使用TDesign

TDesign网址

TDesign

npm i tdesign-miniprogram -S --production