微信小程序日历(可单选或复选时间)

html部分

<view class="calendar custom-class">
  <view class="month">
    <picker bindchange="bindPickerChange" value="{
   {showYear+'-'+showMonth}}" fields='month' mode="date" end="{
   {currentTime}}">
      <text class="title">{
   {
   showYear}}年 {
   {
   showMonth}}月</text>
    </picker>
    <view class="icon_arrows disflex">
      <image src="../../../images/icon_arrows_left.png" bindtap="getLastMonth" class="icon_arrows_left icon_arrows_tip">
      </image>
      <image src="../../../images/icon_arrows_left.png" class="icon_arrows_right icon_arrows_tip" bindtap="getNextMonth"
        wx:if='{
   {currentYear > showYear || (currentYear === showYear && currentMonth > showMonth)}}'></image>
      <image src="../../../images/[email protected]" class="icon_arrows_tip" wx:else></image>
    </view>
  </view>
  <view class="mt-32 week_list">
    <text wx:for="{
   {week}}" class="c-9f9f9f">{
   {
   item}}</text>
  </view>
  <view class="day_list">
    <text wx:for="{
   {dateList}}"
      class="date_item {
   {(item.timestamp === endTimestamp || item.timestamp === startTimestamp)?'selectDate_item':''}} {
   {(item.timestamp < endTimestamp && item.timestamp >= startTimestamp) ? 'selectDateBg' : ''}} c-6b6b6b"
      bindtap="selectDate" data-date="{
   {item.label}}"><text class="selectDate"
        wx:if='{
   {item.timestamp === endTimestamp || item.timestamp === startTimestamp}}'></text>{
   {
   item.label}}<text
        class="circular {
   {item.status === '0' ? 'circular_normal':''}}" wx:if='{
   {item.status}}'></text></text>
  </view>
</view>

js

// components/shopLists/index.js
Component({
   
  externalClasses: ['custom-class'],
  properties: {
   
    type: {
   
      type: String,
      value: 'single', //single表示单选，range表示选择日期区间
    },
    monthTranslate: {
    //日历上的红蓝点
      type: Object,
      value: {
   }
    }
  },
  data: {
   
    week: ['日', '一', '二', '三', '四', '五', '六'],
    dateList: [],
    showYear: '', //页面上展示的年
    showMonth: '', //页面上展示的月
    showDay: '', //页面上展示的日
    startSelectYear: '', //开始选中的年
    startSelectMonth: '', //开始选中的月
    startSelectDay: 0, //开始选中的日
    currentYear: '', //当前年
    currentMonth: '', //当前月
    currentTime: '2021-01', //当前年月日
    startTimestamp: '', //开始的时间戳
    endTimestamp: '', //结束的时间戳
  },
  lifetimes: {
   
    ready() {
   
      const now = new Date();
      const startTimestamp = Date.parse(new Date(now