我搜了好久,找到的一款插件,github地址如下
github地址:https://github.com/AFAP/XCX-Plugins
简单的使用,github上都写了,不重复了。
补充几点:
1)想要打开这个弹层的时候,显示之前选中的区间。要传入daysStyle数组[2019-12-3,2019-12-26]
2)想要做最大,最小的时间限制,比如,只能显示2019年11月1日,到2020年1月31号。在这个范围内,去选择日期。
原插件没给这个属性。我自己改造了一下,加了一个max和min,然后去插件的index.js文件,加了判断
index.js修改部分
let maxtime =this.data.max,mintime=this.data.min,maxtimestamp='',mintimestamp='';
if(maxtime!=null||maxtime!=undefined || maxtime!=''){
maxtime = maxtime.replace(/-/g,'/'); // 把所有-转化成/
mintime = mintime.replace(/-/g,'/');
maxtime = maxtime +' 00:00:00';
mintime = mintime; //最小时间,是后台传过来的,创建民宿的时间
maxtimestamp =new Date(maxtime).getTime();
mintimestamp =new Date(mintime).getTime();
}
// 本月的天数数据
for (let i =0; i < length_days; i++) {
let date =new Date(currenDate.getTime() +86400000 * i);
let todaytamp=date.getTime(),flag=true;
if(maxtimestamp!='' && (todaytamp>maxtimestamp ||
todaytamp
{
flag=false
}
let id =this.formatDate(date);
let day = {
id: id,
date: date,
currentMonth: flag
};
days.push(day)
}
在onDayClick方法里也要加判断,点击就提示这个时间段不可选,然后return false
if(day.date.getTime() < mintimestamp){
wx.showToast({
title:'不能早于' +this.data.min.slice(0,10),
icon:'none'
})
return false;
}else if(day.date.getTime() > maxtimestamp){
wx.showToast({
title:'不能大于' +this.data.max,
icon:'none'
})
return false
}
3)如果外面有个按钮,重置时间,想要展开时间控件弹层时,把当选时间去掉,那么就是把daysStyle数组清空。
放一张效果图