日期时间选择器开始日期和结束日期

时间:2017-01-05 16:33:53

标签: jquery salesforce bootstrap-modal

我有一个要求,即开始日期和结束日期的差异不应超过144小时,即总共6天。

开始日期是日期时间字段,用户将选择日期和时间。 在结束日期日期将根据所选日期和时间计算。时间将长达144小时。

有没有人实现过这个?非常感谢提前。

此致 Mayank

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分: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>