CODEWITHSUNDEEP
jquerysalesforcebootstrap-modal
user6127671
user6127671

Reputation: 11

datetime picker start date and end date

I have a requirement where start date and end date should not have more than 144 hours difference i.e. 6 days in total.

Start Date is date time field and user will select date and time. In end date date would be calculated based on selected date and time. Time would be upto 144 hrs.

Has anyone implemented this? Many thanks in advance.

Regards, Mayank

Upvotes: 1

Views: 1697

Answers (2)

G.Ashok Kumar
G.Ashok Kumar

Reputation: 1633

Here is an example for start and end datepicker using 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>

Upvotes: 0

Shalin Patel
Shalin Patel

Reputation: 1099

I think code below will solve your problem

$(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>

Upvotes: 0

Related Questions