Datepair Example

by Kimhuor Lim

HTML

<script src="https://rawgit.com/jonthornton/jquery-timepicker/master/jquery.timepicker.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/jonthornton/jquery-timepicker/master/jquery.timepicker.css">
<script src="https://rawgit.com/jonthornton/Datepair.js/master/dist/datepair.js"></script>
<script src="https://rawgit.com/jonthornton/Datepair.js/master/dist/jquery.datepair.js"></script>
<script src="https://rawgit.com/timrwood/moment/master/moment.js"></script>
<p id="datetimePicker">
  <input type="text" class="date start" />
  <input type="text" class="time start" /> to
  <input type="text" class="time end" />
  <input type="text" class="date end" />
</p>

JavaScript

$('#datetimePicker .time').timepicker({
  'showDuration': true,
  'timeFormat': 'g:ia'
});

$('#datetimePicker .date').datepicker({
  'format': 'm/d/yyyy',
  'autoclose': true
});

$('#datetimePicker').datepair({
  parseDate: function(input) {
    return $(input).datepicker('getDate');
  },
  updateDate: function(input, dateObj) {
    $(input).datepicker('setDate', dateObj);
    console.log(input);
  }
});