微信小程序Vant Weapp 日历calendar组件多种应用(样式更改,默认区间显示,点击日历时间同步数据,只显示今天之前的数据等)
微信小程序Vant Weapp 日历calendar组件多种应用(样式更改,默认区间显示,点击日历时间同步数据,只显示今天之前的数据等)
我第一次使用这个组件时,小白使用,真是叫“天天不应,叫地地不灵”,好多东西度娘根本告诉不了你,导致我前几天一直在崩溃边缘疯狂试探。唉,在多次研读官方文档,到读一些使用组件的微信小程序源码后,终于摸懂一些门道。声明,初次使用,也许方法走了很多冤路,大佬请绕行或是讨论区指导,我虚心接受,谢谢~
废话不多说,进入正题。
功能实现列表(以日期区间为例)
样式的更改(比较简单,可跳过)
官方文档提供的案例如下
如果我们需要实现具体样式如下
首先,我们先分析样式有哪些的改变:
- 颜色的改变;
- “日期选择”文字、每个月份后面代表几月的数字与时间下面“开始、结束”文字的消失;
- 月份从“2021年1月”到“1月”的样式内容改变;
- 显示点击日历后数据展示。
解决方法:
- 颜色的改变:
官方文档有提到,使用<van-calendar show="{{ show }}" color="#07c160" />
也可以<van-calendar show="{{ show }}" color="{{color}}" />
将颜色从data里面读取,让代码更好的维护。 - “日期选择”文字、每个月份后面代表几月的数字与时间下面“开始、结束”文字的消失:
官方文档提到,使用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;
},
},
- 月份从“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)
}
- 显示点击日历后数据展示:
我们只需要先把你需要的布局下来,再添加样式,具体代码如下:
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就可以实现。
实现思路:
- 因为我们要实现的是一个时间段,那么我们就选择使用defaultDate.type = 数组就行了,在wxml里面使用
<van-calendar show="{{ show }}" default-date = "{{defaultDate}}" />
,我们使用defaultDate传参数进来来改变显示区间。 - 既然是点进来就默认显示,那么我们的数据要在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
})
},
效果展示
点击日历时间同步数据以及天数的计算和限制
这里就接上了目录第一块的第四小问,首先,这里我们就需要把我们需要传过来的数据以参数显示,具体代码请回到上面参考。
实现的思路:
- 点击时间时,获取当前点击时间数据。首先,在官方文档提到,使用confirm,是当日期选择完成后触发,这里我们就可以使用它,获取当前的数据,因为confirm得到是一个数组,我们就使用下标法,把里面的数据提出来,赋给不同的参数;
- 将获取的数据进行格式化,改成自己需要的格式。使用 getFullYear()、getMonth()、**getDate()**函数,根据你所需的要求,获取年份、月份、日期,我这里只需要月份和年份,最后为了数据的显示美观,我加入了一个三目运算,当月份和日期小于“10”的时候前面加一个“0”,大家按需添加;
- 计算天数以及天数限制。将你获取的时间进行加减,在使用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
上一篇: 前端js-----抽奖功能(异步)