dateTimePickerMoment

jquery UI datepicker with unified date formatter with moment

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="datetimepicker-container widget-content">
  <div class="datetimepicker-inner">
    <input type="text" readonly="true" class="widget-datetimepicker" value="Click to Pick a Date" />
  </div>
</div>

JavaScript

$(function() {
  // default 07-07-2016
  var jqDateFormat = 'dd-mm-yy';
  // short month name
   jqDateFormat = 'dd-M-yy';
   //full month name
   jqDateFormat = 'dd-MM-yy';
  var mDateFormat = 'DD-MMM-YYYY';
  var dateNow = new Date();
  var dateTime = new Date(dateNow.getTime());
  var NowMoment = moment();
  datetimepickerEl = $('input.widget-datetimepicker');
  datetimepickerEl.datetimepicker({
  dateFormat:jqDateFormat,
    changeYear: true,
    showTimePicker: false,
    defaultDate: dateTime,
    defaultValue: dateTime,
    autoClose: true,
    showTime: false,
    alwaysSetTime: true,
    alwaysSetTime: false
  });
  // read the value and convert into a date object using moment format
  datetimepickerEl.datetimepicker.parseDate = function(mDateFormat, value) {
   console.log("parseDate");
    //return moment(value, mDateFormat).toDate();
  };
  //push the date into jquery where it can work with it and return it back to moment for re-formatting again
  datetimepickerEl.datetimepicker.formatDate = function (mDateFormat, value) {
    console.log("formatDate");
    return moment(value).format(mDateFormat);
  };
// set the date of picker, read it and reformat it using moment
datetimepickerEl.val(dateTime);
datetimepickerEl.val(NowMoment.format(mDateFormat));
});