【WeUI】日历控件Calendar动态修改最小日期和最大日期

有这样一种需求，选择[开始时间]和[结束时间]，接待时间自动设置起始时间和终止时间。 

使用的日历控件是WeUI官方的Calendar。

    
出差时间
    

        

            
            
            
        
    




    
接待时间
    
    

        
    

实现思路如下：

点击接待时间的时候触发click事件，首先需要验证开始时间和结束时间是否填写正确。

如果正确，初始化接待时间的calendar。

当开始时间和结束时间发生变化的时候，需要先销毁接待时间的calendar，再重新初始化。

销毁的时候需要注意，如果当前没有calendar初始化的实例，直接销毁是会报错的，所以这里设置了一个标志来保存当前接待时间calendar的初始化状态。

let isInitCalener = true; //未初始化

完整代码

    
    

    
    

    
    
    
    
    

    
    
    
    
<%--    --%>

    
出差时间
    

        

            
            
            
        
    



    
接待时间
    
    

        
    

日历控件初始化的时候，设置minDate是可选日期的前一天。

const curDate = new Date();
const preDate = new Date(curDate.getTime() - 24*60*60*1000); //前一天
const nextDate = new Date(curDate.getTime() + 24*60*60*1000); //后一天

演示效果：