JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
<link rel="stylesheet" href="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<body>
<form id="newuserjournal" name="newuserjournal" action="#" method="post">
<input type="text" name="journalentrydate" id="journalentrydate" />
<button type="submit" name="submit" id="submit">Save Date</button>
</form>
</body>
CSS
.error {
font: normal 10px arial;
padding: 3px;
margin: 3px;
background-color: #ffc;
border: 1px solid #c00;
}
body {
font-size:x-large;
background:#CCC;
}
h1 {
margin-bottom:20px;
}
form {
padding:50px;
}
JavaScript
$(document).ready(function () {
jQuery.validator.addMethod(
"dateTime",
function (value, element, params) {
if (!/Invalid|NaN/.test(new Date(value))) {
return true;
}
return false;
},
'Must be in YYYY-MM-DD HH:mm format.');
$("#newuserjournal").validate({
debug: true,
rules: {
journalentrydate: {
required: true,
dateTime: true
}
},
messages: {
journalentrydate: {
required: "Must have a date",
dateTime: "Must be in YYYY-MM-DD HH:mm format"
}
}
});
$("#journalentrydate").datetimepicker({
minDate: "-1Y",
maxDate: 0,
dateFormat: "yy-mm-dd",
hideIfNoPrevNext: true,
showButtonPanel: true,
changeMonth: true,
changeYear: true,
selectOtherMonths: true,
showOtherMonths: true,
numberOfMonths: 1
});
$("#journalentrydate").datetimepicker("setDate", (new Date()));
});