JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css">
<label for="monthDate1">NOT pointing to previously selected date:</label>
<input id="monthDate1" type="text" class="date-picker" />
<br/>
<br/>
<label for="monthDate2">Pointing to previously selected date:</label>
<input id="monthDate2" type="text" class="date-picker" />
JavaScript
$(function() {
//set datepicker or month/year selection
$('#monthDate1').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy'
});
//needed to hide calendar with days
//this bit is adopted from https://gist.github.com/877276#file_gistfile2.html
$("#monthDate1").focus(function () {
$(".ui-datepicker-calendar").hide();
//add event to perform on done button click
$(".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();
$("#monthDate1").datepicker('setDate', new Date(year, month, 1));
});
});
$('#monthDate2').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'dd/mm/yy'
});
$("#monthDate2").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();
$("#monthDate2").datepicker('setDate', new Date(year, month, 1));
});
});
});//end of jQuery.ready()