使用 Jquery datepicker 作为月份范围选择器答案

【问题标题】：Use Jquery datepicker as month range picker使用 Jquery datepicker 作为月份范围选择器
【发布时间】：2015-10-27 10:35:04
【问题描述】：

我想使用 jquery UI datepicker 作为月份选择器。它的代码是什么？这里我试过了，但没有成功

$('#startDateTotal').datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'yy-MM ',
        maxDate: 0,
        onClose: function (selectedDate) {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
            $("#endDateTotal").datepicker("option", "minDate", selectedDate);
        }

【问题讨论】：

标签： javascript jquery jquery-ui datepicker

【解决方案1】：

添加以下css：

.ui-datepicker-calendar {
    display: none;
    }

这隐藏了日历，是一种很老套的做法，但它是唯一的出路。

【讨论】：

已经做到了。但问题是当我选择第二个月时，第一个选择的月份字段会自动清除
你的意思是第二次的值显示不正确？您需要为此编写一个函数，覆盖相同的 beforeShow 方法。

【解决方案2】：

希望下面的代码对你有帮助，

访问http://jsfiddle.net/tmnasim/JLydp/

html

<label for="myDate">Date :</label>
<input name="myDate" class="monthYearPicker" />

css

.ui-datepicker-calendar {
display: none; }

jquery

$(function() {
$('.monthYearPicker').datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'MM yy'
}).focus(function() {
    var thisCalendar = $(this);
    $('.ui-datepicker-calendar').detach();
    $('.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();
        thisCalendar.datepicker('setDate', new Date(year, month, 1));
        });
    });
});

【讨论】：