JSFiddle - React, Tailwind, and code Playground
HTML
<h1>Date Picker</h1>
<form class="date-picker">
<label>full date</label>
<input type="text" class="full_date" value="" />
<input type='hidden' id='hiddentest' />
<label>Year</label>
<input type="text" id='idYear' class="month-year"/>
Month <input type="text" id='month' />
Day <input type="text" id='day' />
</form>
CSS
label, input{
display:block;
}
.ui-datepicker .ui-widget-content {
background: #999 none;
}
JavaScript
$( "#hiddentest" ).datepicker({
showOn: "button",
buttonImage: "/images/calendar.gif",
onSelect: function (dateText, picker) {
var dateObject = $(this).datepicker("getDate");
$("#idYear").val(dateObject.getFullYear());
$("#month").val(dateObject.getUTCMonth()+1);
$("#day").val(dateObject.getUTCDate());
alert($("#hiddentest").val();
},
buttonImageOnly: true,
altField: "#month",
altFormat: "mm",
dateFormat: "mm/dd/yy"
});