logo标签列表

jQuery UI日期选择器仅显示月份和年份

javascriptjquerydatejquery-uijquery-ui-datepicker
394

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

19
所以您想要一个月份选择器？ - dotty
你正在使用jQueryUI日期选择器吗？ - wpjmurray
是的。jQueryUI日期选择器。 - Aanu
1
请查看已接受答案的升级版本，提供了额外的功能在这里。 - Alexander Abakumov
31个回答
454

这里有一个技巧（已更新为完整的 .html 文件）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
    <script type="text/javascript">
        $(function() {
            $('.date-picker').datepicker( {
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'MM yy',
            onClose: function(dateText, inst) { 
                $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
            }
            });
        });
    </script>
    <style>
    .ui-datepicker-calendar {
        display: none;
    }
    </style>
</head>
<body>
    <label for="startDate">Date :</label>
    <input name="startDate" id="startDate" class="date-picker" />
</body>
</html>

编辑 以上示例的jsfiddle： http://jsfiddle.net/DBpJe/7755/

编辑2 只有在点击“完成”按钮时，将月份年份值添加到输入框中。 还允许删除输入框中的值，这在上述字段中是不可能的。 http://jsfiddle.net/DBpJe/5103/

编辑3 基于rexwolf的解决方案，更新更好的解决方案。
http://jsfiddle.net/DBpJe/5106

14
调用“setDate”会在某些浏览器中重新打开日期选择器。为了防止这种情况，可以禁用并启用选择器：$(this).datepicker('disable');
$(this).datepicker('setDate', new Date(year1, month1, 1));$(this).datepicker('enable'); - Sven Sönnichsen
1
@Sven 这里有一个替代方案：$(this).val($.datepicker.formatDate('MM yy', new Date(year, month, 1))); - ThiamTeck
1
我正在尝试使用这个解决方案，但在日期选择器上使用getDate仅返回今天的日期。怎么回事？ - supertopi
2
我看到大多数示例都在页面上使用内联样式。如果您需要在同一页上使用多个日历（例如，每个日历具有不同的设置），这将是一个问题。我更喜欢在.css文件中添加样式，如下所示：`#ui-datepicker-div.noCalendar .ui-datepicker-calendar, #ui-datepicker-div.noCalendar .ui-datepicker-header a {display: none;}#ui-datepicker-div.noCalendar .ui-datepicker-header .ui-datepicker-title{width: 100%; margin: 0;}`然后使用JavaScript来操作行为： $("#ui-datepicker-div").addClass('noCalendar'); - poweratom
1
在上面的例子中，如果我想清除文本框，我就做不到了。有人能帮帮我吗？ - Bik
显示剩余5条评论
102

这个代码对我来说运行得非常完美：

<script type="text/javascript">
$(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('MM yy', new Date(year, month, 1)));
        }
    });

    $(".monthPicker").focus(function () {
        $(".ui-datepicker-calendar").hide();
        $("#ui-datepicker-div").position({
            my: "center top",
            at: "center bottom",
            of: $(this)
        });
    });
});
</script>

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

输出结果为：

输入图片描述

如何为这个日历设置值。 - Alfiza malek
如果我点击打开选择器，然后在它打开的时候在字段中写入格式错误的日期，然后关闭选择器，那么格式错误的文本将保留。您可以查看我的版本中的 onClose 以获取如何处理这种边缘情况的示例。这些情况有很多 :) - Ultroman the Tacoman
67

@Ben Koehler，太完美了！我进行了一些小修改，以便多次使用日期选择器时能按预期工作。如果不进行这些修改，则日期将被解析错误，之前选择的日期也无法高亮显示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
    <script type="text/javascript">
    $(function() {
        $('.date-picker').datepicker( {
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'MM yy',
            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));
            },
            beforeShow : function(input, inst) {
                var datestr;
                if ((datestr = $(this).val()).length > 0) {
                    year = datestr.substring(datestr.length-4, datestr.length);
                    month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNamesShort'));
                    $(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
                    $(this).datepicker('setDate', new Date(year, month, 1));
                }
            }
        });
    });
    </script>
    <style>
    .ui-datepicker-calendar {
        display: none;
        }
    </style>
</head>
<body>
    <label for="startDate">Date :</label>
    <input name="startDate" id="startDate" class="date-picker" />
</body>
</html>
这个答案大部分是正确的。然而，我不得不将 MM 改为 M 才能在已选择日期时选择正确的月份。 - Chazaq
只能使用一种日期格式。您必须为每个不同格式的实例修复子字符串。如果我点击打开选择器，然后在打开选择器的同时在字段中写入错误格式的日期，然后关闭选择器，则错误格式的文本将保留。您可以查看我的版本中的onClose示例，了解如何处理该边缘情况。这些情况有很多 :) - Ultroman the Tacoman
这个答案真的帮助了我，非常感谢，因为我使用M格式。 - adam
18

以上答案都很好。我唯一的抱怨是一旦设置了值，就无法清除该值。此外，我更喜欢“像插件一样扩展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();
2
最终我会给这个投票点踩，因为它无法正常工作，无论是onSelect、onChangeMonthYear还是onClose事件都没有触发，或者没有接收到正确的值，或者如果被覆盖，会使小部件停止工作。 - knocte
10
<style>
.ui-datepicker table{
    display: none;
}


<script type="text/javascript">
$(function() {
    $( "#manad" ).datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'yy-mm',
        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));
        },
        beforeShow : function(input, inst) {
            if ((datestr = $(this).val()).length > 0) {
                actDate = datestr.split('-');
                year = actDate[0];
                month = actDate[1]-1;
                $(this).datepicker('option', 'defaultDate', new Date(year, month));
                $(this).datepicker('setDate', new Date(year, month));
            }
        }
    });
});

这将解决问题 =) 但我想要的时间格式是yyyy-mm。

尽管只在FF4中尝试过。

"yy"在JQuery中表示四位数的年份。如果这正是您想要的，那么您已经成功实现了。 - Paweł Dyda
9
6
未得到维护，但有一个分支：https://github.com/zorab47/jquery.ui.monthpicker - denis.peplin
8

这是我想到的方法。它可以隐藏日历，而不需要额外的样式块，并添加一个清除按钮来解决点击输入框后无法清除值的问题。还可以很好地处理同一页上多个月份选择器的情况。

HTML：

<input type='text' class='monthpicker'>

JavaScript：

$(".monthpicker").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: "yy-mm",
    showButtonPanel: true,
    currentText: "This Month",
    onChangeMonthYear: function (year, month, inst) {
        $(this).val($.datepicker.formatDate('yy-mm', new Date(year, month - 1, 1)));
    },
    onClose: function(dateText, inst) {
        var month = $(".ui-datepicker-month :selected").val();
        var year = $(".ui-datepicker-year :selected").val();
        $(this).val($.datepicker.formatDate('yy-mm', new Date(year, month, 1)));
    }
}).focus(function () {
    $(".ui-datepicker-calendar").hide();
}).after(
    $("<a href='javascript: void(0);'>clear</a>").click(function() {
        $(this).prev().val('');
    })
);
7
像许多人一样，我在尝试做这件事时遇到了无数问题。只有结合已发布的解决方案，并最终进行大量修改，才使我得到了一个适用于所有日期格式和本地化的解决方案，就像普通的日期选择器一样。
我尝试过的其他解决方案存在的问题：
  1. 在日期选择器中选择新日期，也会更改其他日期选择器的（内部）日期，因此当您再次打开其他日期选择器（或尝试获取它们的日期）时，它们的日期与其分配的输入字段中显示的日期不同。
  2. 日期选择器再次打开时无法“记住”日期。
  3. 操纵日期的代码使用了子字符串，因此它并不适用于所有格式。
  4. 如果您为日期键入错误格式的输入字符串，然后单击日期选择器上的“关闭”按钮，则输入字段不会正确更新。
  5. 月份选择器只在关闭时更改输入字段，而不是每当值更改时都更改。
  6. 您无法同时在同一页上拥有显示天数的普通日期选择器和不显示天数的月份选择器。
我终于找到了一种方法来修复所有这些问题，甚至在原始日期选择器中也可以做到！
注意：您不需要使用以下月份选择器脚本来解决常规jQuery日期选择器中的前四个问题。只需使用本帖子中更下面的Datepicker实例化脚本即可。问题5和6仅涉及我尝试过的不同月份选择器解决方案。
问题1-3和5与日期和月份选择器在其内部代码中的引用方式有关，确保它们不会干扰其他日期和月份选择器，以及一些手动更新选择器。您可以在下面的示例实例化中看到这一点。第四个问题通过向datepicker函数添加一些自定义代码来解决（请参见示例中的注释，特别是onClose）。
对于第六个和最后一个问题，仅涉及与日期选择器一起使用月份选择器，我们只需要正确地分离日期选择器和月份选择器即可。
所以，为什么不使用少数自定义jQuery-UI月份选择器插件之一呢？当我编写此文时，我发现的插件缺乏本地化灵活性/能力，有些缺乏动画支持...那么该怎么办呢？从日期选择器代码中自己编写。这样可以获得一个完全功能的月份选择器，具有日期选择器的所有功能，只是不显示日期。
我提供了一个月份选择器js脚本和附带的CSS脚本，使用下面描述的方法，与jQuery-UI v1.11.1代码一起使用。只需将这些代码片段复制到两个新文件monthpicker.js和monthpicker.css中，然后使用下面的实例化代码片段即可。
如果您想阅读我将日期选择器转换为月份选择器的简单过程，请向下滚动到最后一节。然后，您可以尝试使用更新版本的jQuery-UI重复此过程。

现在添加日期选择器和月份选择器到页面中！

以下 JavaScript 代码片段可以在页面上使用多个日期选择器和/或月份选择器，而不会出现上述问题！通常通过大量使用“$(this).”来解决 :)

第一个脚本是用于普通日期选择器，第二个脚本是用于“新”的月份选择器。

被注释掉的.after，它允许您创建一些元素来清除输入字段，是从 Paul Richards 的答案中窃取的。

我在我的月份选择器中使用“MM yy”格式，在我的日期选择器中使用“yy-mm-dd”格式，但这完全兼容所有格式，因此您可以自由选择任何一个。只需更改“dateFormat”选项即可。标准选项“showButtonPanel”，“showAnim”和“yearRange”当然是可选的，并可根据您的需要进行自定义。

添加日期选择器

日期选择器实例化。此日期选择器从90年前到现在。它可以帮助您保持输入字段的正确性，特别是如果您设置了defaultDate、minDate和maxDate选项，但即使您不这样做，它也可以处理。它可以使用任何您选择的dateFormat。

注意：许多“new Date()”调用看起来很荒谬，但我找不到另一种在声明中打包动态日期的方法，而不是为每个部分都这样做，因为在那种上下文中我（据我所知）无法创建可重用的实例。如果有人知道在设置minDate和maxDate等上下文中设置增强日期的更好方法，我将非常感激！

        $('#MyDateTextBox').datepicker({
            dateFormat: 'yy-mm-dd',
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            showMonthAfterYear: true,
            showWeek: true,
            showAnim: "drop",
            constrainInput: true,
            yearRange: "-90:",
            minDate: new Date((new Date().getFullYear() - 90), new Date().getMonth(), new Date().getDate()),
            maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
            defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
            
            onClose: function (dateText, inst) {
                // When onClose is called after we have clicked a day (and not clicked 'Close' or outside the datepicker), the input-field is automatically
                // updated with a valid date-string. They will always pass, because minDate and maxDate are already enforced by the datepicker UI.
                // This try is to catch and handle the situations, where you open the datepicker, and manually type in an invalid date in the field,
                // and then close the datepicker by clicking outside the datepicker, or click 'Close', in which case no validation takes place.
                try {
                    // If datepicker can parse the date using our formatstring, the instance will automatically parse
                    // and apply it for us (after the onClose is done).
                    // If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch.
                    // If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null!
                    var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());

                    // typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to
                    // reset to the last set default date.
                    // You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;'
                    if (typedDate == null)throw "No date selected";

                    // We do a manual check to see if the date is within minDate and maxDate, if they are defined.
                    // If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
                    var minDate = $(this).datepicker("option", "minDate");
                    var maxDate = $(this).datepicker("option", "maxDate");
                    if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
                    if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";

                    // We update the default date, because the date seems valid.
                    // We do not need to manually update the input-field, as datepicker has already done this automatically.
                    $(this).datepicker('option', 'defaultDate', typedDate);
                }
                catch (err) {
                    console.log("onClose: " + err);
                    // Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
                    // a new valid date, by clicking on a day.
                    // Instead, we set the current date, as well as the value of the input-field, to the last selected (and
                    // accepted/validated) date from the datepicker, by getting its default date. This only works, because
                    // we manually change the default date of the datepicker whenever a new date is selected, in both 'beforeShow'
                    // and 'onClose'.
                    var date = $(this).datepicker('option', 'defaultDate');
                    $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
                    $(this).datepicker('setDate', date);
                }
            },

            beforeShow: function (input, inst) {
                // beforeShow is particularly irritating when initializing the input-field with a date-string.
                // The date-string will be parsed, and used to set the currently selected date in the datepicker.
                // BUT, if it is outside the scope of the minDate and maxDate, the text in the input-field is not
                // automatically updated, only the internal selected date, until you choose a new date (or, because
                // of our onClose function, whenever you click close or click outside the datepicker).
                // We want the input-field to always show the date that is currently chosen in our datepicker,
                // so we do some checks to see if it needs updating. This may not catch ALL cases, but these are
                // the primary ones: invalid date-format; date is too early; date is too late.
                try {
                    // If datepicker can parse the date using our formatstring, the instance will automatically parse
                    // and apply it for us (after the onClose is done).
                    // If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch.
                    // If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null!
                    var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());

                    // typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to
                    // reset to the last set default date.
                    // You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;'
                    if (typedDate == null)throw "No date selected";

                    // We do a manual check to see if the date is within minDate and maxDate, if they are defined.
                    // If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
                    var minDate = $(this).datepicker("option", "minDate");
                    var maxDate = $(this).datepicker("option", "maxDate");
                    if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
                    if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";

                    // We update the input-field, and the default date, because the date seems valid.
                    // We also manually update the input-field, as datepicker does not automatically do this when opened.
                    $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), typedDate));
                    $(this).datepicker('option', 'defaultDate', typedDate);
                }
                catch (err) {
                    // Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
                    // a new valid date, by clicking on a day.
                    // We want the same behavior when opening the datepicker, so we set the current date, as well as the value
                    // of the input-field, to the last selected (and accepted/validated) date from the datepicker, by getting
                    // its default date. This only works, because we manually change the default date of the datepicker whenever
                    // a new date is selected, in both 'beforeShow' and 'onClose', AND have a default date set in the datepicker options.
                    var date = $(this).datepicker('option', 'defaultDate');
                    $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
                    $(this).datepicker('setDate', date);
                }
            }
        })
    //.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it
    //    $("<a href='javascript: void(0);'>clear</a>").click(function() {
    //        $(this).prev().val('');
    //    })
    //)
    ;

添加月份选择器

在您想使用月份选择器的页面中包含monthpicker.js文件和monthpicker.css文件。

月份选择器实例化 从此月份选择器检索到的值始终是所选月份的第一天。 从当前月份开始，范围从100年前延伸到未来10年。

    $('#MyMonthTextBox').monthpicker({
        dateFormat: 'MM yy',
        changeMonth: true,
        changeYear: true,
        showMonthAfterYear: true,
        showAnim: "drop",
        constrainInput: true,
        yearRange: "-100Y:+10Y",
        minDate: new Date(new Date().getFullYear() - 100, new Date().getMonth(), 1),
        maxDate: new Date((new Date().getFullYear() + 10), new Date().getMonth(), 1),
        defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
        
        // Monthpicker functions
        onClose: function (dateText, inst) {
            var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
            $(this).monthpicker('option', 'defaultDate', date);
            $(this).monthpicker('setDate', date);
        },

        beforeShow: function (input, inst) {
            if ($(this).monthpicker("getDate") !== null) {
                // Making sure that the date set is the first of the month.
                if($(this).monthpicker("getDate").getDate() !== 1){
                    var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
                    $(this).monthpicker('option', 'defaultDate', date);
                    $(this).monthpicker('setDate', date);
                }
            } else {
                // If the date is null, we reset it to the defaultDate. Make sure that the defaultDate is always set to the first of the month!
                $(this).monthpicker('setDate', $(this).monthpicker('option', 'defaultDate'));
            }
        },
        // Special monthpicker function!
        onChangeMonthYear: function (year, month, inst) {
            $(this).val($.monthpicker.formatDate($(this).monthpicker('option', 'dateFormat'), new Date(year, month - 1, 1)));
        }
    })
    //.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it
    //    $("<a href='javascript: void(0);'>clear</a>").click(function() {
    //        $(this).prev().val('');
    //    })
    //)
    ;

就是这样！ 这就是你制作月份选择器所需要的全部。

我似乎无法在jsfiddle上使用它，但在我的ASP.NET MVC项目中可以正常工作。只需像往常一样将日期选择器添加到您的页面中，并合并上述脚本，可能需要更改选择器（意味着将$("#MyMonthTextBox")更改为适合您的内容）。

我希望这能帮助某些人。

以下是一些额外的日期和月份选择器设置的pastebin链接：

  1. 月份选择器在月末工作。从这个月份选择器得到的日期将始终是该月的最后一天。

  2. 两个协作的月份选择器; 'start' 在月初工作，'end' 在月末工作。它们受彼此限制，因此在 'end' 上选择一个早于 'start' 选择的月份，将会将 'start' 更改为与 'end' 相同的月份。反之亦然。可选：当在 'start' 上选择一个月份时，'end' 上的 'minDate' 将设置为该月份。要删除此功能，请在 onClose 中注释掉一行（请阅读注释）。

  3. 两个协作的日期选择器；它们受彼此限制，因此在 'end' 上选择早于 'start' 选择的日期，将会将 'start' 更改为与 'end' 相同的月份。反之亦然。可选：当在 'start' 上选择一个日期时，'end' 上的 'minDate' 将设置为该日期。要删除此功能，请在 onClose 中注释掉一行（请阅读注释）。

我如何将DatePicker转换为MonthPicker

我已经提取了jquery-ui-1.11.1.js中与日期选择器相关的所有javascript代码，粘贴到一个新的js文件中，并替换了以下字符串：

  • "datepicker" => "monthpicker"
  • "Datepicker" => "Monthpicker"
  • "date picker" => "month picker"
  • "Date picker" => "Month picker"

然后我删除了for循环的一部分，该循环创建了整个ui-datepicker-calendar div（其他解决方案使用CSS隐藏该div）。这可以在_generateHTML: function (inst)中找到。

找到以下行：

"</div><table class='ui-datepicker-calendar'><thead>" +

从关闭div标签后面的所有内容开始标记，并一直标记到（但不包括）该行中出现以下文字的位置：
drawMonth++;

现在它会感到不高兴，因为我们需要关闭一些东西。在之前的闭合div标签后面，添加以下内容：

";

代码现在应该已经很好地拼接在一起了。以下是一个代码片段，展示了你应该得到的结果：
...other code...

calender += "<div class='ui-monthpicker-header ui-widget-header ui-helper-clearfix" + cornerClass + "'>" +
                (/all|left/.test(cornerClass) && row === 0 ? (isRTL ? next : prev) : "") +
                (/all|right/.test(cornerClass) && row === 0 ? (isRTL ? prev : next) : "") +
                this._generateMonthYearHeader(inst, drawMonth, drawYear, minDate, maxDate,
                    row > 0 || col > 0, monthNames, monthNamesShort) + // draw month headers
                "</div>";
            drawMonth++;
            if (drawMonth > 11) {
                drawMonth = 0;
                drawYear++;
            }

...other code...

然后我从jquery-ui.css中复制/粘贴与日期选择器相关的代码到一个新的CSS文件中，并替换以下字符串：

  • "datepicker" ==> "monthpicker"
6
增加一个简单的解决方案。
 $(function() {
    $('.monthYearPicker').datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'M 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));
        });
    });
});

http://jsfiddle.net/tmnasim/JLydp/
特点:

  • 仅显示月份/年份
  • 只有在点击"完成"按钮时，才将月份年份值添加到输入框中
  • 点击"完成"后不会再次打开日期选择器
    ------------------------------------
    另一种解决方案可以在同一页中为日期选择器和月份选择器提供良好的工作效果:(也避免了在IE上多次单击“前一个”按钮可能出现的错误,如使用focus函数)
    JS fiddle链接
5
我结合了上面很多好的答案并得出以下结论：

    $('#payCardExpireDate').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).datepicker('setDate', new Date(year, month, 1)).trigger('change');
                },
                beforeShow : function(input, inst) {
                    if ((datestr = $(this).val()).length > 0) {
                        year = datestr.substring(datestr.length-4, datestr.length);
                        month = datestr.substring(0, 2);
                        $(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
                        $(this).datepicker('setDate', new Date(year, month-1, 1));
                    }
                }
            }).focus(function () {
                $(".ui-datepicker-calendar").hide();
                $("#ui-datepicker-div").position({
                    my: "center top",
                    at: "center bottom",
                    of: $(this)
                });
            });

这个已经被证明可以工作，但是面临很多错误，因此我不得不在日期选择器的几个地方打补丁：

if($.datepicker._get(inst, "dateFormat") === "mm/yy")
{
    $(".ui-datepicker-calendar").hide();
}

补丁1: 在 _showDatepicker 中：为了平滑隐藏；

补丁2: 在 _checkOffset 中：修正月份选择器的定位（否则当字段在浏览器底部时，偏移量检查会出错）；

补丁3: 在 _hideDatepicker 的 onClose 中：否则，关闭日期字段时会闪烁一段非常短的时间，这非常令人烦恼。

我知道我的修复远非完美，但现在它可以工作了。希望能对您有所帮助。

只需在 beforeShow 中添加此行代码：{ inst.dpDiv.addClass('month_year_datepicker') }，日期闪烁将停止 :). 我认为 .focus 将不再需要。 - Parag
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接