Showing only month on jquery ui datepicker

I created a datepicker using jquery ui only showing months but it wasn't as I expect I don't want to list months on select I want to list them like this datepicker - if you going to click When you will see the list

$(document).ready(function(){

    $(".monthPicker").datepicker({ 
        dateFormat: 'mm-yy',
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,

        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).val($.datepicker.formatDate('yy-mm', new Date(year, month, 1)));
        }
    });

    $(".monthPicker").focus(function () {
        $(".ui-datepicker-calendar").hide();
        $("#ui-datepicker-div").position({
            my: "center top",
            at: "center bottom",
            of: $(this)
        });    
    });
    
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<label for="month">Month: </label>
<input type="text" id="month" name="month" class="monthPicker" />

Answers 1

  • If you don't mind, you can add some css to your page:

    .ui-datepicker-year{
        display:none !important;
    }
    

    And pre-handle the output of the datepicker if needed.


Related Articles