datetimepicker

by Louys Patrice Bessette

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="row">
  <div class="col-md-12">
    <form id="form1" method="post">
      <div class="form-group">
        <div class='input-group date' id='datetimepicker1'>
          <input type="text" id="r_from"  name="r_from" class="form-control" >
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
      <div class="form-group">
        <div class='input-group date' id='datetimepicker2'>
          <input type="text" id="r_until"  name="r_until" class="form-control" ><br>
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
      <input type="submit" name="check_cottage" value="Check Availability">
    </form>
  </div>

JavaScript

$(function () {
  $('#datetimepicker1').datetimepicker();
  $('#datetimepicker2').datetimepicker({
    useCurrent:"year"
  });

  $("#datetimepicker1").on("dp.hide", function (e) {
  	console.log("From DP: "+e.date);

    var momentDate = moment(e.date);
    console.log("DP1 Moment hour: "+momentDate.hour());

    var improvedDate = moment(e.date).add(12,"hour");
    console.log("DP2 Moment date: "+improvedDate.hour());
    
    var improvedDateForDP = improvedDate.format("MM/DD/YYYY hh:mm:ss A");
    console.log("DP2 Moment hour: "+improvedDateForDP);
    
    $('#datetimepicker2').data("DateTimePicker").minDate(improvedDate);
    $('#datetimepicker2').data("DateTimePicker").date(improvedDate);
  });

  $("#datetimepicker2").on("dp.change", function (e) {
    $('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
  });
  
});