相关参考链接
使用场景
根据开始日期和结束日期的范围在数据库进行查询。就需要用到日历插件。
主要操作都在链接里,此处只展示自己的实现。
相关代码
wxml
<!--选择开始时间-->
<view>
<calendar calendar-style="calendar" header-style="header" board-style="board" binddayClick="dayClickStart" days-color="{{dayStyleStart}}"/>
</view>
<!--选择结束时间-->
<view">
<calendar calendar-style="calendar" header-style="header" board-style="board" binddayClick="dayClickEnd" days-color="{{dayStyleEnd}}"/>
</view>
js
/**
* 页面的初始数据
*/
data: {
//选择日期样式
dayStyleStart: [],
dayStyleEnd: [],
//页面实现的开始与结束日期
start_Day: 'Start',
end_Day: 'End'
},
/**
* 点击日历某一天
*/
dayClickStart: function(e){
console.log("manage_dayClickStart")
//定义date颜色数组
let dayStyleStartTemp = new Array
//初始化选中颜色
//获取当前时间
const year = e.detail.year
const month = e.detail.month
const day = e.detail.day
var date = year + "/" + month + "/" + day
//获取dayEnd,并比较
var endDay = this.data.end_Day
if (endDay != 'End' & date > endDay){
wx.showToast({
title: '开始时间选择错误',
icon: 'none',
duration: 2500
})
}else{
//设置选中日期颜色
dayStyleStartTemp.push(
{ month: 'current', day: day, color: 'white', background: '#aad4f5' },
);
this.setData({
dayStyleStart: dayStyleStartTemp,
start_Day: date
})
}
console.log("date:"+date)
},
实现效果