欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  互联网

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

程序员文章站 2024-01-09 23:30:46
Vant Weapp 日历calendar微信小程序多种应用(样式更改,默认区间显示,点击日历时间同步数据,只显示今天之前的数据等)我第一次使用这个组件时,小白使用,真是叫“天天不应,叫地地不灵”,好多东西度娘根本告诉不了你,导致我前几天一直在崩溃边缘疯狂试探。唉,在多次研读官方文档,到读一些使用组件的微信小程序源码后,终于摸懂一些门道。声明,初次使用,也许方法走了很多冤路,大佬请绕行或是讨论区指导,我虚心接受,谢谢~废话不多说,进入正题。功能实现列表(以日期区间为例)Vant Weapp 日历cal...

微信小程序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月”的样式内容改变:
    这里官方文档没有具体提出参数解决,所以我使用的方法较为麻烦,直接在组件源码里面进行修改(若有简单方法,请各位大佬指出)
    首先,找到代码具体位置微信小程序Vant Weapp 日历calendar组件多种应用(样式更改,默认区间显示,点击日历时间同步数据,只显示今天之前的数据等)
    根据控制台,我们可以找到控制月份显示地方的代码地方
    微信小程序Vant Weapp 日历calendar组件多种应用(样式更改,默认区间显示,点击日历时间同步数据,只显示今天之前的数据等)
    上面的代码截图就是控制显示的WXML,首先我们先将{{ computed.formatMonthTitle(date) }}隐藏,将我们需要的显示的代码放上去{{ computed.getMark(date) }}月,这样我们显示的内容就从“2021年1月”变成了“1月”
    微信小程序Vant Weapp 日历calendar组件多种应用(样式更改,默认区间显示,点击日历时间同步数据,只显示今天之前的数据等)
    再改变他的样式,从中间到靠左的显示与字体的变化,具体的改法请参考下面代码
.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-datemax-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(),
  },

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

默认区间显示

这里了,就是当你点进来的时候,日历默认显示一个时间段。在官方文档也有提到使用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
    })
  },

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

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

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

  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,
    });
  },

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

重置按钮

参考官方文档,可知通过 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() 函数。

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

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

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

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