在jquery ui datepicker上仅显示月份

时间:2017-03-11 07:34:41

标签: javascript jquery jquery-ui datepicker

我使用jquery ui创建了一个日期选择器,只显示了几个月,但它并不是因为我希望我不想列出数月的选择我想列出它们this datepicker - 如果你去的话单击何时您将看到列表



$(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" />
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

如果您不介意,可以在页面中添加一些css:

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

如果需要,预先处理日期选择器的输出。