jQuery UI DatePicker仅显示月份年份

我正在使用jQuery日期选择器在整个应用程序中显示日历。我想知道是否可以用它显示月份和年份（2010年5月）而不显示日历吗？

#1楼

我还需要一个月选择器。我做了一个简单的标题为年份的标题，下面是4个月的3行。看看：使用jQuery的简单monthyear选择器。

#2楼

我今天有同样的需求，并在github上找到了它，可与jQueryUI一起使用，并在日历中使用了月选择器代替了几天

https://github.com/thebrowser/jquery.ui.monthpicker

#3楼

对BrianS的上述几乎完美的响应进行了一些改进：

我已经重新调整了show上设置的值，因为在这种情况下，它确实确实使它更具可读性（尽管请注意，我使用的格式略有不同）
我的客户不需要日历，因此我添加了一个show / hide类添加项来做到这一点而又不影响任何其他datepickers。该类的删除是在计时器上进行的，以避免表随着日期选择器的淡出而重新闪烁，这在IE中似乎非常明显。

编辑：剩下要解决的一个问题是没有办法清空datepicker-清除该字段并单击以离开，它会以选定的日期重新填充。

EDIT2：我还没有很好地解决这个问题（即没有在输入旁边添加单独的“清除”按钮），所以最终只使用了这个： https : //github.com/thebrowser/jquery.ui.monthpicker-如果有人可以的话得到一个标准的用户界面来做到这一点，这将是惊人的。

    $('.typeof__monthpicker').datepicker({
        dateFormat: 'mm/yy',
        showButtonPanel:true,
        beforeShow: 
            function(input, dpicker)
            {                           
                if(/^(\d\d)\/(\d\d\d\d)$/.exec($(this).val()))
                {
                    var d = new Date(RegExp.$2, parseInt(RegExp.$1, 10) - 1, 1);

                    $(this).datepicker('option', 'defaultDate', d);
                    $(this).datepicker('setDate', d);
                }

                $('#ui-datepicker-div').addClass('month_only');
            },
        onClose: 
            function(dt, dpicker)
            {
                setTimeout(function() { $('#ui-datepicker-div').removeClass('month_only') }, 250);

                var m = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                var y = $("#ui-datepicker-div .ui-datepicker-year :selected").val();

                $(this).datepicker('setDate', new Date(y, m, 1));
            }
    });

您还需要以下样式规则：

#ui-datepicker-div.month_only .ui-datepicker-calendar {
display:none
}

#4楼

上面的答案很好。我唯一的抱怨是，一旦设置了该值便无法清除。另外，我更喜欢像扩展jquery的插件方法。

这对我来说很完美：

$.fn.monthYearPicker = function(options) {
    options = $.extend({
        dateFormat: "MM yy",
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        showAnim: ""
    }, options);
    function hideDaysFromCalendar() {
        var thisCalendar = $(this);
        $('.ui-datepicker-calendar').detach();
        // Also fix the click event on the Done button.
        $('.ui-datepicker-close').unbind("click").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));
        });
    }
    $(this).datepicker(options).focus(hideDaysFromCalendar);
}

然后像这样调用：

$('input.monthYearPicker').monthYearPicker();

#5楼

我需要两个字段（从＆到）的“月/年”选择器，当选择了一个字段时，另一个字段设置了“最大/最小” ...按机票日期选择。我在设置最大值和最小值时遇到问题...其他字段的日期将被删除。感谢上面的几篇文章...我终于弄明白了。您必须按照非常特定的顺序设置选项和日期。

有关完整的解决方案，请参见此小提琴：月/年Picker @ JSFiddle

码：

var searchMinDate = "-2y";
var searchMaxDate = "-1m";
if ((new Date()).getDate() <= 5) {
    searchMaxDate = "-2m";
}
$("#txtFrom").datepicker({
    dateFormat: "M yy",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    showAnim: "",
    minDate: searchMinDate,
    maxDate: searchMaxDate,
    showButtonPanel: true,
    beforeShow: function (input, inst) {
        if ((datestr = $("#txtFrom").val()).length > 0) {
            var year = datestr.substring(datestr.length - 4, datestr.length);
            var month = jQuery.inArray(datestr.substring(0, datestr.length - 5), "#txtFrom").datepicker('option', 'monthNamesShort'));
        $("#txtFrom").datepicker('option', 'defaultDate', new Date(year, month, 1));
                $("#txtFrom").datepicker('setDate', new Date(year, month, 1));
            }
        },
        onClose: function (input, inst) {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $("#txtFrom").datepicker('option', 'defaultDate', new Date(year, month, 1));
            $("#txtFrom").datepicker('setDate', new Date(year, month, 1));
            var to = $("#txtTo").val();
            $("#txtTo").datepicker('option', 'minDate', new Date(year, month, 1));
            if (to.length > 0) {
                var toyear = to.substring(to.length - 4, to.length);
                var tomonth = jQuery.inArray(to.substring(0, to.length - 5), $("#txtTo").datepicker('option', 'monthNamesShort'));
                $("#txtTo").datepicker('option', 'defaultDate', new Date(toyear, tomonth, 1));
                $("#txtTo").datepicker('setDate', new Date(toyear, tomonth, 1));
            }
        }
    });
    $("#txtTo").datepicker({
        dateFormat: "M yy",
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        showAnim: "",
        minDate: searchMinDate,
        maxDate: searchMaxDate,
        showButtonPanel: true,
        beforeShow: function (input, inst) {
            if ((datestr = $("#txtTo").val()).length > 0) {
                var year = datestr.substring(datestr.length - 4, datestr.length);
                var month = jQuery.inArray(datestr.substring(0, datestr.length - 5), $("#txtTo").datepicker('option', 'monthNamesShort'));
                $("#txtTo").datepicker('option', 'defaultDate', new Date(year, month, 1));
                $("#txtTo").datepicker('setDate', new Date(year, month, 1));
            }
        },
        onClose: function (input, inst) {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $("#txtTo").datepicker('option', 'defaultDate', new Date(year, month, 1));
            $("#txtTo").datepicker('setDate', new Date(year, month, 1));
            var from = $("#txtFrom").val();
            $("#txtFrom").datepicker('option', 'maxDate', new Date(year, month, 1));
            if (from.length > 0) {
                var fryear = from.substring(from.length - 4, from.length);
                var frmonth = jQuery.inArray(from.substring(0, from.length - 5), $("#txtFrom").datepicker('option', 'monthNamesShort'));
                $("#txtFrom").datepicker('option', 'defaultDate', new Date(fryear, frmonth, 1));
                $("#txtFrom").datepicker('setDate', new Date(fryear, frmonth, 1));
            }

        }
    });

还要如上所述将其添加到样式块中：

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

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3167504

标签

jQuery UI

Monthpicker

jquery

jQuery UI Datepicker

datepicker