使用WdatePicker插件如何设定2个时间在都在同一天

最近因为数据库的日志查询要做成按天分表来查询，所以前端需要对日志的查询时间范围限制在同一天内，而前端用来设置时间的是WdatePicker插件。比如下面的2个时间要设置为同一天，百度了一下，发现了一篇文章，但是写的模糊，没有解决问题。后来看了几篇其他关于WdatePicker插件的设定的文章，终于自己搞定了这个功能。现在把代码贴出来，方便大家使用，也给博客增加点人气，虽然是前端的知识，哈哈哈。

  首先我们jsp页面中代码是这样的。

<label>接收时间：</label>
<input name="params.starttime" value="" id="storageStartTime" onfocus="WdatePicker({ startDate: '%y-%M-01 00:00:00', dateFmt: 'yyyy-MM-dd HH:mm:ss',minDate:limitDayDate(1),maxDate:limitDayDate(2) })" class="Wdate" type="text" />
<label>到：</label>
<input name="params.endtime" value="" id="storageEndTime" onfocus="WdatePicker({ startDate: '%y-%M-01 00:00:00', dateFmt: 'yyyy-MM-dd HH:mm:ss', minDate:'#F{$dp.$D(\'storageStartTime\')}',maxDate:limitDayDate(3)})" class="Wdate" type="text" />

起始时间的标签id是storageStartTime，而结束时间是storageEndTime。然后WdatePicker中的maxDate和minDate属性就是分别规定时间最大值和最小值。关键在于limitDayDate(e)方法了。

 //限制2个时间为同一天
  function limitDayDate(e) {
      var dateString="";
      if(e==2){//起始时间最大值判断
          var endDate = $dp.$("storageEndTime").value;
          //var endDate = $("#storageEndTime").val();这样取值也是可以的，上面无效的时候可以用普通的这种。
          var limitDate = new Date();
          if (endDate != ""&&endDate != null) {//当填有结束时间时，以结束时间为最大值
              var limitDate = new Date(endDate);
              dateString = limitDate.getFullYear() + '-'
                  + (limitDate.getMonth()+1) + '-'
                  + limitDate.getDate()+' '
                  + limitDate.getHours()+':'
                  + limitDate.getMinutes()+':'
                  +limitDate.getSeconds();
          }else{//结束时间空白时，不超出今天
              dateString = limitDate.getFullYear() + '-'
                  + (limitDate.getMonth()+1) + '-'
                  + limitDate.getDate()+' '
                  + '23:59:59';
          }
      }else if(e==1){//起始时间的最小值判断
          var endDate = $dp.$("storageEndTime").value;
          var limitDate = new Date();
          if (endDate != ""&&endDate != null) {//
              var limitDate = new Date(endDate);
              dateString = limitDate.getFullYear() + '-'
                  + (limitDate.getMonth()+1) + '-'
                  + limitDate.getDate()+' '+'00:00:00';
              // + endDate.getHours()+':'
              // + endDate.getMinutes()+':'
              //+endDate.getSeconds();//
          }
      }else if(e==3){//结束时间最大值判断
          var limitDate = new Date();
          var startDate = $dp.$("storageStartTime").value;
          if(startDate!=""&&startDate!=null){//当有起始时间时，则以起始时间当天最后时间为最大值
              limitDate = new Date(startDate);
              dateString = limitDate.getFullYear() + '-'
                  + (limitDate.getMonth()+1) + '-'
                  + limitDate.getDate()+' '
                  + '23:59:59';
          }else{//没选择起始时间时，默认是今天最大值
              dateString = limitDate.getFullYear() + '-'
                  + (limitDate.getMonth()+1) + '-'
                  + limitDate.getDate()+' '
                  + '23:59:59';
          }
      }
      return dateString;
  }

 

  在这个方法中有3个分支。因为需要控制起始时间和结束时间的最大值和最小值才可以。而结束时间的最小值，那就是用户设定好的起始时间。其中的逻辑相信仔细看过代码就会明白了。其中getMonth()+1的原因在于月份存的是0到11。在这里给读者提个醒。应该没什么好描述的了。有问题欢迎留言~