我使用jQuery日期选择器在我的应用程序上显示日历。我想知道我是否可以使用它来显示月和年(2010年5月)而不是日历?


当前回答

在jQueryUI.com上搜索datepicker后,以下是我对你问题的结论和答案。

首先,我想对你的问题说不。你不能只使用jQueryUI datepicker来选择月份和年份。不支持。它没有回调函数。

但是你可以通过使用css来隐藏日期等,让它只显示月份和年份。我认为这没有意义因为你需要点击日期来选择日期。

我只能说你得用另一个约会工具。就像罗杰建议的那样。

其他回答

我对公认的答案有一定的困难,没有其他答案可以用最小的努力作为基础。因此,我决定对已接受答案的最新版本进行调整,直到它至少满足最低的JS编码/可重用性标准。

这里有一个比第三版(最新版)本·克勒的公认答案更清晰的解决方案。此外,它将:

不仅要使用mm/yy格式,还要使用包括 OP的MM yy。 不隐藏页面上其他日期选择器的日历。 不会用datestr隐式污染全局JS对象, 月、年等变量。

看看吧:

$('.date-picker').datepicker({
    dateFormat: 'MM yy',
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    onClose: function (dateText, inst) {
        var isDonePressed = inst.dpDiv.find('.ui-datepicker-close').hasClass('ui-state-hover');
        if (!isDonePressed)
            return;

        var month = inst.dpDiv.find('.ui-datepicker-month').find(':selected').val(),
            year = inst.dpDiv.find('.ui-datepicker-year').find(':selected').val();

        $(this).datepicker('setDate', new Date(year, month, 1)).change();
        $('.date-picker').focusout();
    },
    beforeShow: function (input, inst) {
        var $this = $(this),
            // For the simplicity we suppose the dateFormat will be always without the day part, so we
            // manually add it since the $.datepicker.parseDate will throw if the date string doesn't contain the day part
            dateFormat = 'd ' + $this.datepicker('option', 'dateFormat'),
            date;

        try {
            date = $.datepicker.parseDate(dateFormat, '1 ' + $this.val());
        } catch (ex) {
            return;
        }

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

        inst.dpDiv.addClass('datepicker-month-year');
    }
});

你需要的其他所有东西是下面的CSS:

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

就是这样。希望以上内容能节省更多读者的时间。

如果有人想也为多个日历它不是很难添加这个功能到jquery ui。 简化搜索功能:

x+='<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix'+t+'">'+(/all|left/.test(t)&&C==0?c?f:n:"")+(

把这个加在x前面

var accl = ''; if(this._get(a,"justMonth")) {accl = ' ui-datepicker-just_month';}

搜索

<table class="ui-datepicker-calendar

并将其替换为

<table class="ui-datepicker-calendar'+accl+'

也可以搜索

this._defaults={

将其替换为

this._defaults={justMonth:false,

对于CSS,你应该使用:

.ui-datepicker table.ui-datepicker-just_month{
    display: none;
}

所有这些都完成后,只需转到所需的datepicker init函数并提供设置变量

$('#txt_month_chart_view').datepicker({
    changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        justMonth: true,
        create: function(input, inst) {
            $(".ui-datepicker table").addClass("badbad");
        },
        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).datepicker('setDate', new Date(year, month, 1));
        }
});

justMonth: true是这里的关键:)

在jQueryUI.com上搜索datepicker后,以下是我对你问题的结论和答案。

首先,我想对你的问题说不。你不能只使用jQueryUI datepicker来选择月份和年份。不支持。它没有回调函数。

但是你可以通过使用css来隐藏日期等,让它只显示月份和年份。我认为这没有意义因为你需要点击日期来选择日期。

我只能说你得用另一个约会工具。就像罗杰建议的那样。

我遇到了日期选择器和月份选择器混合的问题。 我是这样解的。

    $('.monthpicker').focus(function()
    {
    $(".ui-datepicker-calendar").show();
    }).datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM/yy',
        create: function (input, inst) { 

         },
        onClose: function(dateText, inst) { 
            var month = 1+parseInt($("#ui-datepicker-div .ui-datepicker-month :selected").val());           
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();

        }
    });

我喜欢@user1857829的回答和他的“扩展jquery-like-a-plugin方法”。 我只是做了一点修改,当你以任何方式改变月份或年份时,选择器实际上会在字段中写入日期。 我发现在使用了一段时间后,我喜欢这种行为。

jQuery.fn.monthYearPicker = function(options) {
  options = $.extend({
    dateFormat: "mm/yy",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    showAnim: "",
    onChangeMonthYear: writeSelectedDate
  }, options);
  function writeSelectedDate(year, month, inst ){
   var thisFormat = jQuery(this).datepicker("option", "dateFormat");
   var d = jQuery.datepicker.formatDate(thisFormat, new Date(year, month-1, 1));
   inst.input.val(d);
  }
  function hideDaysFromCalendar() {
    var thisCalendar = $(this);
    jQuery('.ui-datepicker-calendar').detach();
    // Also fix the click event on the Done button.
    jQuery('.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));
      thisCalendar.datepicker("hide");
    });
  }
  jQuery(this).datepicker(options).focus(hideDaysFromCalendar);
}