使用WdatePicker外掛如何設定2個時間在都在同一天
阿新 • • 發佈:2018-12-18
最近因為資料庫的日誌查詢要做成按天分表來查詢,所以前端需要對日誌的查詢時間範圍限制在同一天內,而前端用來設定時間的是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。在這裡給讀者提個醒。應該沒什麼好描述的了。有問題歡迎留言~