微信小程序,好用的日历插件,可选日期区间

我搜了好久,找到的一款插件,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数组清空。


放一张效果图

你可能感兴趣的:(微信小程序,好用的日历插件,可选日期区间)