Question

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

Answer 1

这是一个黑客（用整个.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的解决方案更新了Better Solution http://jsfiddle.net/DBpJe/5106

Answer 2

这code对我来说是完美无缺的：

<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" />

输出是：

Answer 3

@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>

Answer 4

以上答案非常好。我唯一的抱怨是，一旦设定值，你就无法清除它。我也更喜欢extend-jquery-like-a-plugin方法。

这对我来说非常适合：

$.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();

Answer 5

<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));
            }
        }
    });
});

这将解决问题=）但我想要timeFormat yyyy-mm

仅在FF4中尝试过

Answer 6

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

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

Answer 7

这就是我想出的。它隐藏日历而不需要额外的样式块，并添加一个清除按钮来处理单击输入后无法清除值的问题。同样适用于同一页面上的多个月拍者。

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('');
    })
);

Answer 8

添加一个更简单的解决方案

 $(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/
功能：

仅显示月/年
仅在单击完成按钮
点击“完成”时没有“重新打开”行为
------------------------------------
另一个适用于同一页面中的datepicker和monthpicker的解决方案:(也避免了多次点击IE中的前一个按钮的错误，如果我们使用焦点功能可能会发生这种情况）
JS fiddle link

Answer 9

我需要两个字段的月/年选择器（From＆amp; To），当选择一个时，Max / Min设置在另一个...一个挑选的机票日期。我在设置max和min时遇到问题...其他字段的日期将被删除。感谢以上几篇帖子......我终于明白了。您必须按特定顺序设置选项和日期。

查看完整解决方案的小提琴：Month/Year 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; }

Answer 10

我结合了上述许多好的答案并达成了这个目标：

    $('#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)
                });
            });

这被证明有效，但面临许多错误，所以我被迫在几个datepicker的地方修补：

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

patch1：在_showDatepicker中：平滑隐藏;

patch2：在_checkOffset中：更正月份选择器定位（否则当该字段位于浏览器底部时，偏移检查已关闭）;

patch3：在_hideDatepicker的onClose中：否则当关闭日期时，字段会闪烁很短的时间，这非常烦人。

我知道我的解决方案远非好，但现在它正在发挥作用。希望它有所帮助。

Answer 11

这只是我还是在IE（8）中不能正常工作？单击完成后日期会发生变化，但是日期选择器会再次打开，直到您实际单击页面中的某个位置以将焦点放在输入字段上...

我正在寻求解决这个问题。

<!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));
        }
    });
});
</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>

Answer 12

我遇到了日期选择器与月份选择器混合的问题。我解决了这个问题。

    $('.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();

        }
    });

Answer 13

如果有人也想要多个日历，那么将这个功能添加到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函数并提供设置var

$('#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是关键所在：）

Answer 14

如果您正在寻找月份选择器，请尝试jquery.mtz.monthpicker

这对我很有用。

Answer 15

与其他许多人一样，我在尝试这样做时遇到了很多问题，并且只发布了解决方案的组合，并最终实现了完美的大黑客攻击，为我提供了解决方案。

我尝试过的这个帖子中其他解决方案的问题：

在日期选择器中选择一个新日期，也会更改其他日期选择器的（内部）日期，因此当您再次打开其他日期（或尝试获取日期）时，它们的日期将不同于显示的日期。他们分配的输入字段。

日期拣货员不会记得＆＃34;再次打开的日期。

用于处理日期的代码使用了子字符串，因此它与所有格式都不兼容。

＆＃34;我的月度补丁＆＃34;仅在关闭它时更改输入字段，而不是在值发生更改时更改。

如果您输入错误格式的日期输入字符串，则输入字段未正确更新，然后点击“关闭”按钮。在datepicker上。

我没有正常的日期选择器，它显示日期，与月份选择器在同一页面上，不显示日期。

我终于找到了解决所有这些问题的方法。前四个可以简单地通过小心你如何在他们的内部代码中引用你的日期和月份选择器来修复，当然还可以手动更新你的选择器。这可以在底层附近的实例化示例中看到。通过向datepicker函数添加一些自定义代码可以帮助解决第五个问题。

注意：您不需要使用以下monthpicker脚本来修复普通datepicker中的前三个问题。只需使用此帖子底部附近的datepicker instantiation-script。

现在，要使用monthpickers并修复最后一个问题，我们需要将datepickers和monthpickers分开。我们可以获得为数不多的jQuery-UI monthpicker插件之一，但有些缺乏本地化的灵活性/能力，有些缺乏动画支持......那么，该怎么办？ 滚动你自己的＆＃34;来自datepicker-code！这将为您提供一个功能齐全的月份选择器，具有日期选择器的所有功能，只是没有显示天数。

我使用jQuery-UI v1.11.1代码，使用下面描述的方法提供了 monthpicker js-script 和 accompanying CSS-script 。只需将这些代码片段分别复制到两个新文件monthpicker.js和monthpicker.css。

这是我经历的过程，克隆原始日期选择器并使其成为月份选择器

如果您不关心我如何制作这些内容，请滚动浏览此部分，然后滚动到第34行;现在将日期选择器和月份选择器添加到页面中！＆＃34; < /强>

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

＆＃34;日期选择器＆＃34; ==＆GT; ＆＃34; monthpicker＆＃34;

＆＃34;日期选择器＆＃34; ==＆GT; ＆＃34; Monthpicker＆＃34;

＆＃34;日期选择器＆＃34; ==＆GT; ＆＃34;月选者＆＃34;

＆＃34;日期选择器＆＃34; ==＆GT; ＆＃34;月份选择器＆＃34;

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

找到说：
的行
"</div><table class='ui-datepicker-calendar'><thead>" +

标记所有内容，从结束div-tag 后向下标记（以及不包括）所说的行：

drawMonth++;

现在它会不高兴，因为我们需要关闭一些东西。在关闭之前的div-tag之后，添加：

";

现在应该很好地将代码拼接在一起。这是一个代码片段，展示了您应该最终得到的内容：

...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...

然后我将关于datepickers的jquery-ui.css中的代码复制/粘贴到新的CSS文件中，并替换以下字符串：

＆＃34;日期选择器＆＃34; ==＆GT; ＆＃34; monthpicker＆＃34;

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

以下javascript代码段与页面上的多个datepickers和/或monthpickers一起使用，没有上述问题！通常使用＆＃39; $（this）修复。＆＃39;很多：）

第一个脚本用于普通的datepicker，第二个脚本用于＆＃34; new＆＃34; monthpickers。

超出评论的 .after ，可以让你创建一些元素来清除输入字段，这是从Paul Richards＆＃39;答案。

我正在使用＆＃34; MM yy＆＃34;我的月份补丁中的格式，以及＆＃39; yy-mm-dd＆＃39;我的datepicker中的格式，但与所有格式完全兼容，因此您可以随意使用您想要的任何格式。只需更改＆＃39; dateFormat＆＃39;选项。标准选项＆＃39; showButtonPanel＆＃39;，＆＃39; showAnim＆＃39;和＆＃39; yearRange＆＃39;当然是可选的，可根据您的意愿定制。

添加日期选择器

Datepicker实例化。 这个从90年前开始到现在。它可以帮助您保持输入字段的正确性，特别是如果您设置了defaultDate，minDate和maxDate选项，但如果您不这样做，它可以处理它。它适用于您选择的任何dateFormat。

$('#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文件。

Monthpicker实例化 从此月份选取器中检索的值始终是所选月份的第一天。从当月开始，范围从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项目中对我有用。只需执行您通常所做的操作即可向页面添加日期选择器，并合并上述脚本，可能需要将选择器（意思是$（＆＃34;＃MyMonthTextBox＆＃34;））更改为适合您的内容。

我希望这有助于某人。

指向一些额外的日期和月份补丁设置的粘贴代码链接：

Monthpicker working on the last day of the month。从这个月份获得的日期将始终是该月的最后一天。

Two collaborating monthpickers; ＆＃39;启动＆＃39;这个月的第一天正在工作，并且＆＃39;结束＆＃39;正在努力工作的最后一个月。他们都受到彼此限制，所以选择一个月结束＆＃39;在“开始”选定的月份之前，将更改“开始”＃39;与＆＃39;结束的同一个月＃39;反之亦然。可选：在＆＃39; start＆＃39;选择月份时，＆＃39; minDate＆＃39;在＆＃39;结束＆＃39;设置为那个月。要删除此功能，请在onClose中注释掉一行（阅读注释）。

Two collaborating datepickers;他们都受到彼此限制，因此选择结束日期＆＃39;在“开始”选定日期之前，将更改“开始”＃39;与＆＃39;结束的同一个月＃39;反之亦然。可选：在＆＃39; start＆＃39;选择日期时，＆＃39; minDate＆＃39;在＆＃39;结束＆＃39;设置为该日期。要删除此功能，请在onClose中注释掉一行（阅读注释）。

Answer 16

在为datepicker挖掘jQueryUI.com之后，这是我的结论并回答你的问题。

首先，我会对您的问题说否。您不能仅使用jQueryUI datepicker来选择月份和年份。它不受支持。它没有回调函数。

但是你可以通过使用css来隐藏日子等，只能在显示上进行显示。而且我认为没有意义仍然会导致你需要点击日期才能选择日期。

我可以说你只需要使用另一个日期选择器。就像罗杰所说的那样。

Answer 17

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

这是更清洁的解决方案的方式，而不是3rd (latest) edition接受的答案的Ben Koehler。而且，它会：

不仅可以使用mm/yy格式，还可以使用其他任何格式 OP的MM yy。
不会隐藏页面上其他日期选择器的日历。
没有用datestr隐式污染全局JS对象， month，year等变量。

检查出来：

$('.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;
}

就是这样。希望以上内容可以为进一步的读者节省一些时间。

Answer 18

我喜欢@ user1857829的答案和他的“extend-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);
}

Answer 19

对BrianS几乎完美的回应做了一些改进：

我已经在show上设置了值，因为我认为在这种情况下它实际上确实使它更具可读性（虽然注意我使用的格式略有不同）
我的客户想要没有日历，所以我添加了一个on show / hide类添加，而不会影响任何其他日期选择器。删除类是在一个计时器上，以避免表格在日期选择器淡出时闪回，这在IE中似乎非常明显。

编辑：要解决这个问题的一个问题是没有办法清空日期选择器 - 清除字段并单击，然后重新填充所选日期。

EDIT2：我没有设法很好地解决这个问题（即没有在输入旁边添加单独的Clear按钮），所以最后只使用了这个：https://github.com/thebrowser/jquery.ui.monthpicker - 如果有人可以获得标准UI那么做这太棒了。

    $('.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
}

Answer 20

怎么样： http://www.mattkruse.com/javascript/calendarpopup/

选择月份选择示例

Answer 21

我尝试了这里提供的各种解决方案，如果你只是想要几个下降，它们工作得很好。

此处建议的最佳（外观等）'picker'（https://github.com/thebrowser/jquery.ui.monthpicker）基本上是jquery-ui datepicker的旧版本的副本，其中_generateHTML被重写。但是，我发现它不再适用于当前的jquery-ui（1.10.2）并且有其他问题（不关闭esc，不关闭其他小部件打开，具有硬编码样式）。

我没有尝试修复该月份补丁，而是使用最新的日期选择器重新尝试相同的进程，而是继续勾选现有日期选择器的相关部分。

这涉及覆盖：

_generateHTML（构建月份选择器标记）
parseDate（因为当没有日期组件时它不喜欢它），
_selectDay（因为datepicker使用.html（）来获取日期值）

由于这个问题有点陈旧且已经得到很好的回答，这里只有_selectDay覆盖来显示这是如何完成的：

jQuery.datepicker._base_parseDate = jQuery.datepicker._base_parseDate || jQuery.datepicker.parseDate;
jQuery.datepicker.parseDate = function (format, value, settings) {
    if (format != "M y") return jQuery.datepicker._hvnbase_parseDate(format, value, settings);
    // "M y" on parse gives error as doesn't have a day value, so 'hack' it by simply adding a day component
    return jQuery.datepicker._hvnbase_parseDate("d " + format, "1 " + value, settings);
};

如上所述，这是一个老问题，但我发现它很有用，所以想要用一个替代解决方案来添加反馈。

Answer 22

我还需要一个月的选择器。我做了一个简单的一年与标题和3行4个月以下。看看：Simple monthyear picker with jQuery。

Answer 23

我知道这是一个有点迟到的回应，但我前几天遇到了同样的问题而且我带来了一个很好的＆amp;顺利解决。首先，我找到了这个伟大的约会选择器here

然后我刚刚更新了这样的示例附带的CSS类（jquery.calendarPicker.css）：

.calMonth {
  /*border-bottom: 1px dashed #666;
  padding-bottom: 5px;
  margin-bottom: 5px;*/
}

.calDay 
{
    display:none;
}

当你更改任何内容时，插件会触发一个事件DateChanged，所以你没有点击一天并没关系（并且它适合作为年和月的选择器）

希望它有所帮助！

Answer 24

感谢Ben Koehler的解决方案。

但是，我遇到了多个datepickers实例的问题，其中一些需要选择日期。 Ben Koehler的解决方案（在编辑3中）有效，但隐藏了所有实例中的日期选择。这是解决此问题的更新：

$('.date-picker').datepicker({
    dateFormat: "mm/yy",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    onClose: function(dateText, inst) {
        if($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1) {
            $(this).datepicker(
                'setDate',
                new Date(
                    $("#ui-datepicker-div .ui-datepicker-year :selected").val(),
                    $("#ui-datepicker-div .ui-datepicker-month :selected").val(),
                    1
                )
            ).trigger('change');
            $('.date-picker').focusout();
        }
        $("#ui-datepicker-div").removeClass("month_year_datepicker");
    },
    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));
            $("#ui-datepicker-div").addClass("month_year_datepicker");
        }
    }
});

Answer 25

标记为答案的工作！！但在我的情况下，不止一个datepicker，只想在特定的datepicker上实现

所以我使用dp的实例并找到datepicker Div 并添加隐藏类

这里的代码

<style>
    .hide-day-calender .ui-datepicker-calendar{
        display:none;
    }
</style>

<script>
        $('#dpMonthYear').datepicker({ 
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'MM yy',
            onClose: function (dateText, inst) { 
                $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
            },
            beforeShow: function (elem,dp) {
                $(dp.dpDiv).addClass('hide-day-calender'); //here a change
            }
        });
</script>

注意：您不能定位.ui-datepicker-calendar并设置css，因为它会在选择/更改时不断呈现。

Answer 26

对于一个月份选择器，使用JQuery v 1.7.2，我有以下javascript就是这样做

$l("[id$=txtDtPicker]").monthpicker({ showOn: "both", buttonImage: "../../images/Calendar.png", buttonImageOnly: true, pattern: 'yyyymm', // Default is 'mm/yyyy' and separator char is not mandatory monthNames: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'] });

Answer 27

使用onSelect回拨并手动删除年份部分并手动设置字段中的文本

这是我经历的过程，克隆原始日期选择器并使其成为月份选择器

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

添加日期选择器

添加月份补丁

指向一些额外的日期和月份补丁设置的粘贴代码链接：

jQuery UI DatePicker仅显示月份

27 个答案: