Amal's datetimepicker

by Amal Das

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/css/toastr.css">
<div class='input-group date datePickerStart'>
  <input type='text' class="form-control" />
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div><br>
<div class='input-group date datePickerEnd'>
  <input type='text' class="form-control" />
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>

CSS

.input-group {
    max-width: 300px;
}

JavaScript

//me to moment.js mporoume na formaroyme thn hmeromhnia

$(function() {
  $('.datePickerStart').datetimepicker({
  minDate: new Date()
  });
  $('.datePickerEnd').datetimepicker();
  $(".datePickerStart").on("dp.change", function(e) {
    if (e.oldDate != null) {
      toastr.success(moment(e.date).format('MM/DD/YYYY'));
    }
    $('.datePickerEnd').data("DateTimePicker").minDate(e.date);
     var dt = new Date(e.date);
			dt.setDate(dt.getDate() + 2);
      $('.datePickerEnd').data("DateTimePicker").maxDate(dt);
  });
});