如何动态设置改变layui 时间插件laydate中min和max值

偏执的太偏执、 2023-02-14 10:10 12阅读 0赞

## 如何动态设置改变layui 时间插件laydate中min和max值 ##

准备工作：需要引入两个插件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MDM0Mg_size_16_color_FFFFFF_t_70]

HTML 代码

JavaScript 代码

layui.use('laydate', function(){
      var laydate = layui.laydate;
      var startDate=laydate.render({
        elem: '#start'
        ,min: 0  
        ,max: 7
        ,done: function(value, date){
        		//最小值 月份哪里为什么要减一呢？因为month是从零开始的
        		endDate.config.min ={    
            year:date.year,     
            month:date.month-1,     
            date: date.date+1   //加一 的意思就是比当前日期后一天，
          };
          //最大值
          endDate.config.max ={    
            year:date.year,     
            month:date.month-1,     
            date: date.date+8  
          };
        }
      });
      
      var endDate= laydate.render({//渲染结束时间选择
            	elem: '#end'//通过id绑定html中插入的end
            	,min: 0 //
        			,max: 7
            	,done: function (value, dates) {
            		//最小值 月份哪里为什么要减一呢？因为month是重零开始的
    		    		startDate.config.min ={    
    		        year:date.year,     
    		        month:date.month-1,     
    		        date: date.date-8  
    		      };
    		      //最大值
    		      startDate.config.max ={    
    		        year:date.year,     
    		        month:date.month-1,     
    		        date: date.date-1  
    		      };
               }
           });
      });

**注意**：月份哪里为什么要减一呢？因为月份的索引是从零开始的。

**效果图**：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MDM0Mg_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MDM0Mg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200602083557853.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MDM0Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MDM0Mg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200602084228804.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MDM0Mg==,size_16,color_FFFFFF,t_70