1. 程式人生 > >使用WdatePicker外掛如何設定2個時間在都在同一天

使用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。在這裡給讀者提個醒。應該沒什麼好描述的了。有問題歡迎留言~