微信小程序Vant Weapp 日历calendar组件多种应用（样式更改，默认区间显示，点击日历时间同步数据，只显示今天之前的数据等）

• 生活家

微信小程序Vant Weapp 日历calendar组件多种应用（样式更改，默认区间显示，点击日历时间同步数据，只显示今天之前的数据等）

我第一次使用这个组件时，小白使用，真是叫“天天不应，叫地地不灵”，好多东西度娘根本告诉不了你，导致我前几天一直在崩溃边缘疯狂试探。唉，在多次研读官方文档，到读一些使用组件的微信小程序源码后，终于摸懂一些门道。声明，初次使用，也许方法走了很多冤路，大佬请绕行或是讨论区指导，我虚心接受，谢谢~

废话不多说，进入正题。

功能实现列表（以日期区间为例）

  • 微信小程序Vant Weapp 日历calendar组件多种应用（样式更改，默认区间显示，点击日历时间同步数据，只显示今天之前的数据等）
    • 样式的更改（比较简单，可跳过）
    • 只显示当日之前包括当日的时间
    • 默认区间显示
    • 点击日历时间同步数据以及天数的计算和限制
    • 重置按钮
    • 掌握到这种方法了，其余的日历单选，多选大同小异，大家可以尝试完成其他用法的功能演示。

样式的更改（比较简单，可跳过）

官方文档提供的案例如下

如果我们需要实现具体样式如下

首先，我们先分析样式有哪些的改变：

  1. 颜色的改变；
  2. “日期选择”文字、每个月份后面代表几月的数字与时间下面“开始、结束”文字的消失；
  3. 月份从“2021年1月”到“1月”的样式内容改变；
  4. 显示点击日历后数据展示。

解决方法：

  1. 颜色的改变：
    官方文档有提到，使用 <van-calendar show="{ { show }}" color="#07c160" />
    也可以<van-calendar show="{ { show }}" color="{ {color}}" />将颜色从data里面读取，让代码更好的维护。
  2. “日期选择”文字、每个月份后面代表几月的数字与时间下面“开始、结束”文字的消失：
    官方文档提到，使用show-title控制日历标题显示，具体用法<van-calendar show="{ { show }}" show-title="{ {false}}" />；
    而使用show-mark便可以控制月份背景水印显示，具体用法<van-calendar show="{ { show }}" show-mark="{ {false}}" />；
    最后使用formatter就可以实现时间下面“开始、结束”文字的消失，当然你也可以自定义下面文字的显示。首先，在wxml里面使用“`，
    再在JS里面的data里面进行数据的更改：
  data: { 
    show: false,
    formatter(day) { 
      if (day.type === 'start') { 
        day.bottomInfo = ' ';   //bottomInfo下方的提示信息
      } else if (day.type === 'end') { 
        day.bottomInfo = ' ';
      }
      return day;
    },
  },
  1. 月份从“2021年1月”到“1月”的样式内容改变：
    这里官方文档没有具体提出参数解决，所以我使用的方法较为麻烦，直接在组件源码里面进行修改（若有简单方法，请各位大佬指出）
    首先，找到代码具体位置
    根据控制台，我们可以找到控制月份显示地方的代码地方

    上面的代码截图就是控制显示的WXML，首先我们先将{ { computed.formatMonthTitle(date) }}隐藏，将我们需要的显示的代码放上去{ { computed.getMark(date) }}月，这样我们显示的内容就从“2021年1月”变成了“1月”

    再改变他的样式，从中间到靠左的显示与字体的变化，具体的改法请参考下面代码

.van-calendar__month-title {   text-align: left;  //靠左  height: 44px;  font-size: 48rpx;  //字体大小  height: var(--calendar-header-title-height, 44px);  font-weight: 500;  margin-top: 75rpx;  margin-left: 45rpx;  font-size: var(--calendar-month-title-font-size, 48rpx);  line-height: 44px;  line-height: var(--calendar-header-title-height, 44px)}
  1. 显示点击日历后数据展示：
    我们只需要先把你需要的布局下来，再添加样式，具体代码如下：

wxml

<view class="header">
    <view class="header-up">
      <view class="time-start">
        <view class="time-text">开始时间</view>
        <view class="time-data-md">{ { startTime}}</view>
      </view>
      <view class="time-duration">— { { timeCount}}天 —</view>
      <view class="time-end">
        <view class="time-text">结束时间</view>
        <view class="time-data-md">{ { endTime}}</view>
      </view>
    </view>

wxssl

.header{ 
  width: 100%;
  /* height: 236rpx; */
  height: 19.6vh;
  border-bottom: 1rpx solid #eee;
  font-size: 24rpx;
  color: #333;
}
.header-up{ 
  width: 100%;
  height: 142rpx;
  padding: 39rpx 40rpx 0 40rpx;
  box-sizing: border-box;
  display:flex;
  justify-content: space-between;
}
.header-up .time-data-md{ 
  line-height: 61rpx;
  color: #0052d9;
  font-weight: bold;
  font-size: 30rpx;
}
.header-up .time-end .time-text{ 
  text-align: end;
}
.header-down{ 
  width: 100%;
  height: 82rpx;
  line-height: 82rpx;
  padding: 0 41rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  font-weight: 500;
}

这里就不提功能怎么实现了，具体功能实现看目录第四个模块。这里的样式更改了大多可以看官方文档Vant Weapp，多看官方文档，每个参数使用一下，你会理解的更快，使用的更熟练。

只显示当日之前包括当日的时间

在官方文档上提到，可以通过min-date和max-date定义日历的范围，需要注意的是min-date和max-date的区间不宜过大，否则会造成严重的性能问题。一般使用这个功能更就是选择之前的时间进行查看，以往数据的显示。
在wxml里面使用<van-calendar show="{ { show }}" min-date="{ { minDate }}" max-date="{ { maxDate }}"/>
在JS里面data里面在传入参数的值，注意这里也只能使用时间戳的形式。

  data: { 
    show: false,
    maxDate: new Date().getTime(),
    minDate: new Date(2019, 3, 1).getTime(),
  },

效果展示

默认区间显示

这里了，就是当你点进来的时候，日历默认显示一个时间段。在官方文档也有提到使用default-date就可以实现。
实现思路：

  1. 因为我们要实现的是一个时间段，那么我们就选择使用defaultDate.type = 数组就行了，在wxml里面使用<van-calendar show="{ { show }}" default-date = "{ {defaultDate}}" />，我们使用defaultDate传参数进来来改变显示区间。
  2. 既然是点进来就默认显示，那么我们的数据要在onLoad就传进来。注意，传进来的时间要以时间戳的形式。
  onLoad: function (options) { 
    let dataStart = new Date().getTime()- (1000 * 60 * 60 * 24 * 1) //前一天时间
    let dataEnd = new Date().getTime() - (1000 * 60 * 60 * 24 * 8) //前八天的时间
    let defaultDate = [dataEnd, dataStart]
    this.setData({ 
      defaultDate:defaultDate
    })
  },

效果展示

点击日历时间同步数据以及天数的计算和限制

这里就接上了目录第一块的第四小问，首先，这里我们就需要把我们需要传过来的数据以参数显示，具体代码请回到上面参考。
实现的思路：

  1. 点击时间时，获取当前点击时间数据。首先，在官方文档提到，使用confirm，是当日期选择完成后触发，这里我们就可以使用它，获取当前的数据，因为confirm得到是一个数组，我们就使用下标法，把里面的数据提出来，赋给不同的参数；
  2. 将获取的数据进行格式化，改成自己需要的格式。使用 getFullYear()、getMonth()、**getDate()**函数，根据你所需的要求，获取年份、月份、日期，我这里只需要月份和年份，最后为了数据的显示美观，我加入了一个三目运算，当月份和日期小于“10”的时候前面加一个“0”，大家按需添加；
  3. 计算天数以及天数限制。将你获取的时间进行加减，在使用parseInt函数进行计算出具体天数，最后再进行判断，你的时间时候超出的规定的时间，进行提示。注意，在进行时间限制的这里，官方文档中有提到可以通过max-range属性来指定最多可选天数，选择的范围超过最多可选天数时，会弹出相应的提示文案，但是这里我们需要实现的是，不点击确定按钮就会显示时间，经多次测试这里的show-confirm="{ { false }}"与max-range="{ { 3 }}"会导致冲突，不能实现这个功能，所以我就自己进行天数判断，再使用 wx.showToast({})进行提示（各位大佬如果有好的方法或是我的方法有问题请指出~）

具体代码如下
WXML

 <van-cell title="选择日期区间" value="{ { date }}" bind:click="onDisplay" />
    <van-calendar
      type="range"
      show="{ { show }}"
      value="{ {date}}"
      poppable="{ {false}}"
      show-title="{ {false}}"
      show-subtitle="{ {false}}"
      default-date = "{ {defaultDate}}"
      min-date="{ { minDate }}"
      max-date="{ { maxDate }}"
      formatter="{ { formatter }}" 
      show-confirm="{ { false }}" 
      bind:confirm="onConfirm" 
    />

JS

  formatDate(date) {  //格式化
    date = new Date(date);
    return `${ date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1}月${ date.getDate() < 10 ? "0" + date.getDate() : date.getDate()}日`;
  },
  onConfirm(event) { 
    let time = event.detail;
    const start = time[0];
    const end = time[1];
    let startTime = `${ this.formatDate(start)}`;
    let endTime = `${ this.formatDate(end)}`;
    let start_date = new Date(start);
    let end_date = new Date(end);
    let days = end_date.getTime() - start_date.getTime();
    let day = parseInt(days / (1000 * 60 * 60 * 24));
    if (day > 365) { 
      this.setData({ 
        timeCount: 365,
        endTime: "请重新选择",
      });
      wx.showToast({ 
        title: '选择天数不超过1年',
        icon: 'none',
        duration: 1500
      })
      this.onShow()
    } else { 
      this.setData({ 
        timeCount: day,
        endTime: endTime,
      });
    }
    this.setData({ 
      show: false,
      startTime: startTime,
      timeCount: day,
    });
  },

效果展示

重置按钮

参考官方文档，可知通过 selectComponent 可以获取到 Calendar 实例并调用实例方法，便可以实现重置。

具体代码如下

WXML

 <van-cell title="选择日期区间" value="{ { date }}" bind:click="onDisplay" />
    <van-calendar
      id="myCalendar"
      type="range"
      show="{ { show }}"
      color="{ {color}}"
      value="{ {date}}"
      poppable="{ {false}}"
      show-title="{ {false}}"
      show-subtitle="{ {false}}"
      default-date = "{ {defaultDate}}"
      min-date="{ { minDate }}"
      max-date="{ { maxDate }}"
      formatter="{ { formatter }}" 
      show-confirm="{ { false }}" 
      bind:confirm="onConfirm" 
    />

JS

  reset: function (e) { 
    let myCalendar = this.selectComponent('#myCalendar')
    let time = myCalendar.data
    let dataStart = new Date().getTime()- (1000 * 60 * 60 * 24 * 1)
    let dataEnd = new Date().getTime() - (1000 * 60 * 60 * 24 * 8)
    time.currentDate[1] = dataStart
    time.currentDate[0] = dataEnd
    let startTime = `${ this.formatDate(time.currentDate[0])}`;
    let endTime = `${ this.formatDate(time.currentDate[1])}`;
    this.setData({ 
      startTime: startTime,
      endTime: endTime,
      timeCount: 7,
    })
    myCalendar.reset()
  },

实现思路： 在WXML给他取一个id名，再在JS里面获取id，调用reset() 函数。

效果展示：

掌握到这种方法了，其余的日历单选，多选大同小异，大家可以尝试完成其他用法的功能演示。

如果需要全部源码，评论后，我整理后发出。
如果有问题，欢迎一起讨论，共同进步！初学微信小程序，有问题请指出，谢谢~

本文地址：https://blog.csdn.net/weixin_44520823/article/details/112548688

赞 (0)
上一篇 2022年3月22日
下一篇 2022年3月22日

相关推荐