JSFiddle - React, Tailwind, and code Playground

by Adrian Calina

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<input id="monthAndDate" type="text" class="datePicker"/><br />
<input id="regular" type="text" class="datePicker"/><br />
<button id="toogleDate">Toogle date</button>

CSS

.datePickerMonthAndYear .ui-datepicker-calendar{
    display:none;
}

JavaScript

$(function(){
    
    $('#monthAndDate').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        beforeShow: function (e, t) {           
			$("#ui-datepicker-div").addClass('datePickerMonthAndYear');			
        },
        onClose: function(dateText, inst) { 
            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));
        }        
    });
    
    $('#regular').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        beforeShow: function (e, t) {           
			$("#ui-datepicker-div").removeClass('datePickerMonthAndYear');			
        },
        onClose: function(dateText, inst) { 
            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));
        }        
    });
     
});