JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css">
Date1: <input type="text" id="datepicker1" value="08.09.2005">
Next input: <input><br>
Date2: <input type="text" id="datepicker2" value=""><br>
Date3: <input type="text" id="datepicker3" value="">
JavaScript
jQuery.fn.enablePlusMinusInDatePicker = function(today){
if (!today) {
if ($(this).val() !== '') {
today = $(this).val();
}
else {
today = new Date();
}
}
function changeDay(obj, plus){
if (obj.val()){
var date = obj.datepicker("getDate");
date.setDate(date.getDate() + (plus? 1: -1));
obj.datepicker("setDate", date);
}
}
this.keypress(function(e){
switch (String.fromCharCode(e.charCode || e.keyCode)){
case "+":
changeDay($(this), true);
e.preventDefault();
break;
case "-":
changeDay($(this), false);
e.preventDefault();
break;
case "h":
case "H":
$(this).datepicker("setDate", today);
e.preventDefault();
break;
}
});
return this;
};
$( "#datepicker1" )
.datepicker({dateFormat: "dd.mm.yy"})
.enablePlusMinusInDatePicker();
$( "#datepicker2" )
.datepicker({dateFormat: "dd.mm.yy"})
.enablePlusMinusInDatePicker('31.12.1950');
$( "#datepicker3" )
.datepicker({dateFormat: "dd.mm.yy"})
.enablePlusMinusInDatePicker();