datePicker

jquery UI datepicker with datetime extension to test some localization features

by David McClelland

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.css">
<script src="https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js"></script>
<div class="datepicker-container widget-content">
  <div class="datepicker-inner">
    <input type="text" readonly="true" class="widget-datepicker" value="Click to Pick a Date" />
  </div>
</div>

JavaScript

$(function() {
  var dateFormat = 'dd-MMM-yy';
  var dateNow = new Date();
  var dateTime = new Date(dateNow.getTime());
  datepickerEl = $('input.widget-datepicker');
  datepickerEl.val(formatDate(dateTime, dateFormat));
  datepickerEl.datepicker({});
  datepickerEl.datepicker.setDefaults({
    dateFormat: 'dateFormat'
  });

});

function formatDate(value, format) {
  alert("formatDate");
  if (format.substring(0, 9) === 'relative:') {
    var m = moment(value);
    return m.fromNow();
  } else {
    var m = moment(value);
    return m.formatWithJDF(format);
  }
}