WdatePicker日期组件范围限制

最新推荐文章于 2024-07-04 17:15:56 发布

代码蜗牛

最新推荐文章于 2024-07-04 17:15:56 发布

阅读量969

点赞数

分类专栏：前端语言技术文章标签： javascript

本文链接：https://blog.csdn.net/lxq199422/article/details/73201218

版权

前端语言技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在工作中，经常碰到需要查询两个日期之间数据，但是两个日期之间的间隔，又要有要求，本文以WdatePicker的日期组件为例，用JS代码控制两个日期组件的间隔不能大于30天
JS函数

        //前后日期相差不能大于30天
   	var md=new Date(); //第二个输入框最大值的全局变量  
        //第一个输入框选择好日期的时候操作  
        function pickedFunc(){  
  
        var Y=$dp.cal.getP('y'); //用内置方法获取到选中的年月日  
        var M=$dp.cal.getP('M');  
        var D=$dp.cal.getP('d');  
        M=parseInt(M,10)-1;  
        D=parseInt(D,10)+30;//字符串的数字转换成int再运算。并且如果超过30天，也能自动处理。  
        var d = new Date();  
        d.setFullYear(Y,M,D);//设置时间  
        var nowDate=new Date();
        if(nowDate<=d){ //现在的时间比较，如果算出来的值大于现在时间，修改全局变量md为现在时间。  
            md=nowDate;  
        }else{ //全局变量设置为算出来的值得   
            var month=d.getMonth()+1; //月份的范围是（0到11）;  
            md=d.getFullYear()+"-"+month+"-"+d.getDate(); //直接把d给过去会有问题，所以拼成字符串发过去  
          }  
         }  
       //第一个清空的时候的操作  
       function clearedFunc(){  
          md=new Date();  
       }  
       //给第二个输入框定义规则  
       function picker2rule(ele){  
          WdatePicker({el:ele,minDate:'#F{$dp.$D(\'startDate\')}',maxDate:md});  
       }

页面组件

<input type="text" name="startDate" id="startDate" style="width:150px" 
           οnfοcus="WdatePicker({maxDate:'#F{$dp.$D(\'endDate\')||\'new Date()\'}',
                minDate:'#F{$dp.$D(\'endDate\',{d:-30})}',onpicked:pickedFunc,oncleared:clearedFunc})"  class="Wdate"></input>
<input type="text" name="endDate" id="endDate" style="width:150px" οnfοcus="picker2rule(this)"  class="Wdate"></input>

页面效果