JSFiddle - React, Tailwind, and code Playground

by jquerybyexample

HTML

Select Date :
<input type='text' id='txtDate' />
<br/>
<br/>Select Another Date :
<input type='text' id='txtDate1' />

CSS

body {
    font-family:Arial;
    font-size : 10pt;
    padding:15px;
}

JavaScript

$(document).ready(function () {
    $("#txtDate1").datepicker();
    $('#txtDate').datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'MM yy',

        onClose: function () {
            var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
            $(this).datepicker('refresh');
        },

        beforeShow: function () {
            if ((selDate = $(this).val()).length > 0) {
                iYear = selDate.substring(selDate.length - 4, selDate.length);
                iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5), $(this).datepicker('option', 'monthNames'));
                $(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1));
                $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
            }
        }
    });

    $("#txtDate").focus(function () {
        $(".ui-datepicker-calendar").hide();
        $("#ui-datepicker-div").position({
            my: "center top",
            at: "center bottom",
            of: $(this)
        });
    });

    $("#txtDate").blur(function () {
        $(".ui-datepicker-calendar").hide();
    });
});