JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/blitzer/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>
<div id="inline"></div>
<div><label for="dp12">12hr:</label> <input id="dp12" type="text" value="06/23/2010 2 pm" /></div>
<div><label for="multi">Multi-Month:</label> <input id="multi" type="text" value="06/23/2010 2 pm" /></div>
<div><label for="dp24">24hr:</label> <input id="dp24" type="text" value="06/23/2010 2:00" /></div>
<input type="hidden" id="hidden" value="06/23/2010 2pm" />
<a href="javascript:$('#hidden').datepicker('show')">Show!</a>
CSS
body { font-family: sans-serif; font-size: 12px }
label { font-weight: bold; }
div {
margin-bottom: 10px;
}
JavaScript
(function ($, undefined) {
$.fn.datetimepicker = function (options) {
if(typeof options == typeof '') return this.datepicker.apply(this, arguments);
options = $.extend({}, options);
options.showTime = true;
options.constrainInput = false;
return this.datepicker(options);
}
$.datepicker._getTimeText = function (inst, h, m) {
h = h || inst.selectedHour || 0;
m = m || inst.selectedMinute || 0;
if (this._get(inst, 'clockType') == 12) {
return (h == 0 || h == 12 ? '12' : h >= 12 ? h - 12 : h)
+ ':' + (m < 10 ? '0' + m : m)
+ ' ' + (h < 12 ? 'AM' : 'PM');
} else return h + ':' + (m < 10 ? '0' + m : m);
}
var formatDate = $.datepicker.formatDate;
$.datepicker.formatDate = function (format, date, settings) {
//console.log(this);
var inst = $.datepicker._curInst;
var showTime = inst ? this._get(inst, 'showTime') : false;
if (showTime) {
date.setHours(inst.selectedHour || 0);
date.setMinutes(inst.selectedMinute || 0);
}
return formatDate.apply(this, arguments) + (showTime ? ' ' + this._getTimeText(inst) : '');
}
$.datepicker._defaults.clockType = 12;
var _hideDatepicker = $.datepicker._hideDatepicker;
$.datepicker._hideDatepicker = /*overrides*/function () {
var inst = $.datepicker._curInst;
inst.selectedHour = inst.currentHour = inst.selectedMinute = inst.currentMinute = undefined;
_hideDatepicker.apply(this, arguments);
}
var _getDate = $.datepicker._getDate;
$.datepicker._getDate = /*overrides*/function (inst) {
var date = _getDate.apply(this, arguments);
date.setHours(inst.selectedHour || inst.currentHour);
date.setMinutes(inst.selectedMinute || inst.currentMinute);
return date;
}
var parseDate = $.datepicker.parseDate;
var rxTime =...