JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<div id="dialog-datepicker" title='Select Date of Birth' style="display:none;color: #014061;">
<div id="dob-datepicker"></div>
<br />
<div>Selected Date <strong>(YYYY-MM-DD)</strong>:
<div id="strSelectedDate" style="font-weight:bold; font-size: 16px;background-color: #BCE9FA;border: 1px solid #57A3CD;padding: 2px 8px;width:120px;"></div>
</div>
</div>
<input type="input" id="Edit-HMODependentBirthDt" />
JavaScript
jQuery(document).on('change', '.ui-datepicker-month', function(){
alert('test');
});
$().ready(function(){
/*
$('.ui-datepicker-month').live("change", function(e) {
$('#strSelectedDate').text("");
});
*/
$('.ui-datepicker-year').live("change", function(e) {
$('#strSelectedDate').text("");
});
$('#Edit-HMODependentBirthDt').click(function(){
var currentTime = new Date();
var curYear = currentTime.getFullYear();
$selectedDate = "";
//$selectedDate = $('#Edit-HMODependentBirthDt').val() == "" ? "" : $('#Edit-HMODependentBirthDt').val();
$( "#dob-datepicker" ).datepicker({ dateFormat: "yy-mm-dd", changeMonth: true, changeYear: true, yearRange: (curYear-65) + ':' + curYear,
beforeShowDay: function (date) {
var today = new Date();
today.setDate(today.getDate() - 14);
if (date > today)
return [false];
else
return [true];
},
onSelect: function(dateText, inst){
$selectedDate = dateText;
$('#strSelectedDate').text($selectedDate);
}
});
if($selectedDate != ""){
$( "#dob-datepicker" ).datepicker("setDate", $selectedDate);
$('#strSelectedDate').text($selectedDate);
}else{
$( "#dob-datepicker" ).datepicker("setDate", "");
$('#strSelectedDate').text("");
}
$( "#dialog-datepicker" ).dialog({
height: 370,
width: 240,
modal: true,
buttons: {
"OK": function () {
$('#Edit-HMODependentBirthDt').val($selectedDate);
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
});
});