JSFiddle - React, Tailwind, and code Playground
by manoj
HTML
<input id="PrevYrPeriodTo"/>
JavaScript
$('#PrevYrPeriodTo').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'M-y'
});
var defDate = "Dec-14";
$("#PrevYrPeriodTo").datepicker('option', 'defaultDate', new Date("20" + defDate.split('-')[1], monthInNumber(defDate.split('-')[0]), ""));
$("#PrevYrPeriodTo").datepicker('setDate', new Date("20" + defDate.split('-')[1], monthInNumber(defDate.split('-')[0]), ""));
$("#PrevYrPeriodTo").focus(function () {
$(".ui-datepicker-calendar").hide();
$(".ui-datepicker-close").click(function () {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$("#PrevYrPeriodTo").datepicker('option', 'defaultDate', new Date(year, month, 1));
$("#PrevYrPeriodTo").datepicker('setDate', new Date(year, month, 1));
});
});
function monthInNumber(month) {
var m = 1;
var monthNames = new Array("Jan", "Feb", "Mar",
"Apr", "May", "Jun", "Jul", "Aug", "Sep",
"Oct", "Nov", "Dec");
if(month != "" && month != undefined)
{
m = monthNames.indexOf(month)+1;
}
return m;
}