JSFiddle - React, Tailwind, and code Playground
HTML
<label for="end_date">From:</label>
<input name="start_date" id="id_start_date" class="from" />
<label for="end_date">To:</label>
<input name="end_date" id="id_end_date" class="to" />
JavaScript
$(function () {
$('.from').datepicker({
dateFormat: "yy/mm",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function (dateText, inst) {
function isDonePressed() {
return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
}
if (isDonePressed()) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1)).trigger('change');
$('.date-picker').focusout() //Added to remove focus from datepicker input box on selecting date
}
},
beforeShow: function (input, inst) {
inst.dpDiv.addClass('month_year_datepicker')
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length - 4, datestr.length);
month = datestr.substring(0, 2);
$(this).datepicker('option', 'defaultDate', new Date(year, month - 1, 1));
$(this).datepicker('setDate', new Date(year, month - 1, 1));
$(".ui-datepicker-calendar").hide();
}
}
})
});
<!--to:-->
$(function () {
$('.to').datepicker({
dateFormat: "yy/mm",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function (dateText, inst) {
function isDonePressed() {
return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
}
if (isDonePressed()) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year =...