Keeping MonthPicker Open using Jquery UI

Question

I want monthpicker to open all the time when page loads. And Change Month or Year it will Automatically Updated to lable. I can Handle Event for label updates and etc.

but I want it Open on Page is loaded. I'm following this answer :- https://stackoverflow.com/a/6013093/4952944

I have tried :- http://jqueryui.com/datepicker/#inline But it works for date I want to make it work for Month and year picker.

I tried a demo with if I us a Division with jquery UI.

Date: <div id="datepicker"></div>

And I use Jquery like this :-

$( function() {
        $( "#datepicker" ).datepicker();
} );

It works datepicker opens Inline and open continuously. But I want to make it work for above SO's code. I tried everything like put it on when page loads. I'm not sure But may be due to some change events it's not loading on page Load.

@PradeepSingh. No it's not working. We have to open month picker on page load. — Bhavin, Jun 06 '17 at 09:12
@PradeepSingh. Thank you for your efforts I got my solution. — Bhavin, Jun 06 '17 at 09:46
@PradeepSingh. Ohk sure. I have given answered my own question please check it. And I will update it in jsfiddle. — Bhavin, Jun 06 '17 at 10:58

score 0 · Accepted Answer · answered Jun 06 '17 at 09:50

I got My solution. On page Load hide the calendar view.

$('.ui-datepicker-calendar').css('display','none');

And I have change the script as per my requirement. But here two things to note on page load hide the calendar view. And use below script when onChangeMonthYear event is fired,

setTimeout(function() {
                   $('.ui-datepicker-calendar').hide();
});

Script :-

<script type="text/javascript">
    $( function() {
        $(".monthPicker").datepicker({
            dateFormat: 'MM yy',
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            beforeShow: true,
            onChangeMonthYear: function(dateText, inst) {
                setTimeout(function() {
                   $('.ui-datepicker-calendar').hide();
                });
                var month = $(".ui-datepicker-month :selected").val();
                var year = $(".ui-datepicker-year :selected").val();
                alert(month);
                alert(year);
            }
        });
        $(".monthPicker").focus(function () {
            $(".ui-datepicker-calendar").hide();
            $("#ui-datepicker-div").position({
                my: "center top",
                at: "center bottom",
                of: $(this)
            });
        });
    });
</script>

HTML :-

<div class="monthPicker" id="month"></div>

Keeping MonthPicker Open using Jquery UI

1 Answers1