2017-01-05 148 views
1

我有一個要求,開始日期和結束日期不應該有超過144小時的差異,即總共6天。datetime選擇器開始日期和結束日期

開始日期是日期時間字段,用戶將選擇日期和時間。 在結束日期日期將根據選定的日期和時間進行計算。時間將高達144小時。

有沒有人執行過此操作?提前謝謝了。

問候, Mayank

+0

有很多很多的問題例如,如果你搜索這個關於這個的話,[this](http://stackoverflow.com/questions/29122275/set-end-date-after-select-start-date)。實現取決於你正在使用的datepicker庫,但邏輯大致相同。 –

回答

0

我想下面的代碼將解決您的問題

$(function() { 
 
    $("#datepicker1").datepicker(); 
 
    $("#datepicker2").datepicker(); 
 
}); 
 

 

 
function validateDiff() { 
 
    var fromdate = new Date($("#datepicker1").val()); 
 
    var todate = new Date($("#datepicker2").val()); 
 
    var validdiff = 1000 * 60 * 60 * 24; 
 

 
    console.log(fromdate); 
 
    console.log(todate); 
 

 
    var date_diff = todate - fromdate; 
 
    console.log(date_diff); 
 

 
    if (date_diff == validdiff * 6) 
 
    alert("Date Difference is 6 Days exact"); 
 
    else if (date_diff <= validdiff * 6) 
 
    alert("Date Difference is less than 6 Days"); 
 
    else 
 
    alert("Date Difference is grater than 6 Days"); 
 
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<link rel="stylesheet" href="/resources/demos/style.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 

 

 
<p>Date From : 
 
    <input type="text" id="datepicker1"> 
 
</p> 
 
<p>Date To : 
 
    <input type="text" id="datepicker2"> 
 
</p> 
 
<button type="button" onclick="validateDiff()">Check</button>

0

這裏是開始和結束的日期選擇器的使用jQuery的例子

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 

    <script> 
    $(document).ready(function() { 
    $("#dt1").datepicker({ 
     dateFormat: "dd-M-yy", 
     minDate: 0, 
     onSelect: function() { 
      var dt2 = $('#dt2'); 
      var startDate = $(this).datepicker('getDate'); 
      //add 30 days to selected date 
      startDate.setDate(startDate.getDate() + 30); 
      var minDate = $(this).datepicker('getDate'); 
      //minDate of dt2 datepicker = dt1 selected day 
      dt2.datepicker('setDate', minDate); 
      //sets dt2 maxDate to the last day of 30 days window 
      dt2.datepicker('option', 'maxDate', startDate); 
      //first day which can be selected in dt2 is selected date in dt1 
      dt2.datepicker('option', 'minDate', minDate); 
      //same for dt1 
      $(this).datepicker('option', 'minDate', minDate); 
     } 
    }); 
    $('#dt2').datepicker({ 
     dateFormat: "dd-M-yy" 
    }); 
}); 
    </script> 
</head> 
<body> 
<form> 
    <input type="text" id="dt1"> 
    <input type="text" id="dt2"> 
</form> 
</body> 
</html> 
相關問題