jQuery интерфейса управления datepicker, чтобы показать месяц год только

Я использую jQuery date picker для отображения календаря по всему моему приложению. Я хочу знать, могу ли я использовать его для отображения месяца и года (Май 2010 года), а не календаря?

27 ответов


вот Хак (обновляется с целым .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


этой код работает безупречно для меня:

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

вывод:

enter image description here


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

приведенные выше ответы довольно хороши. Моя единственная жалоба заключается в том, что вы не можете очистить значение после его установки. Также я предпочитаю подход 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();

<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 гггг-мм

только пробовал в FF4, хотя


У меня была эта же потребность сегодня и нашел это на github, работает с jQueryUI и имеет месяц выбора вместо дней в календаре

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


вот что я придумал. Он скрывает календарь без необходимости дополнительного блока стиля и добавляет кнопку Очистить, чтобы справиться с проблемой невозможности очистить значение после нажатия на вход. Также отлично работает с несколькими monthpickers на одной странице.

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

мне нужен был выбор месяца / года для двух полей (От & До), и когда один был выбран, макс/мин был установлен на другом...a la сбор даты билетов на самолет. У меня были проблемы с настройкой max и min...даты другого поля будут стерты. Благодаря нескольким из вышеперечисленных постов...Наконец-то я понял. Вы должны установить параметры и даты в очень определенном порядке.

см. эту скрипку для полного решения:Подборщик Месяца/Года @ 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; }

Я объединил многие из вышеперечисленных хороших ответов и пришел на это:

    $('#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: in _checkOffset: чтобы исправить расположение выбора месяца (в противном случае, когда поле находится в нижней части браузера, флажок смещения выключен);

patch3: в onClose _hideDatepicker: в противном случае при закрытии поля даты будут мигать в течение очень короткого периода, что очень раздражает.

Я знаю, что мое исправление было далеко не хорошо, но сейчас оно работает. Надеюсь, это поможет.


это только я или это не работает так, как должно быть в IE(8)? Дата изменяется при нажатии кнопки Готово, но datepicker открывается снова, пока вы не нажмете где-нибудь на странице, чтобы потерять фокус на поле ввода...

Я ищу решение этого.

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

Если вы ищете месяц выбора попробуйте это С помощью jQuery.МТЗ.monthpicker

Это сработало для меня хорошо.


Waht о: http://www.mattkruse.com/javascript/calendarpopup/

Выберите месяц-выберите пример


после копать jQueryUI.com для datepicker, вот мой вывод и ответ на ваш вопрос.

во-первых, я бы сказал нет на ваш вопрос. Вы не можете использовать jQueryUI datepicker только для выбора месяца и года. Он не поддерживается. Для этого у него нет функции обратного вызова.

но вы можете взломать его, чтобы дисплей только месяц и год, используя css, чтобы скрыть дни и т. д. И я думаю, что это не имеет смысла, потому что тебе нужно ... даты, которые нужно щелкнуть, чтобы выбрать дату.

Я могу сказать, что вам просто нужно использовать другой datepicker. Вроде того, что предложил Роджер.


У меня была проблема выбора даты, смешанного с выбором месяца. Я решил это так.

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

        }
    });

если кто-то хочет, чтобы также для нескольких календарей не очень сложно добавить эту функциональность в 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 здесь ключевое :)


сделал пару уточнений к почти идеальному ответу Брайана выше:

  1. Я регексировал значение, установленное на шоу, потому что я думаю, что это действительно делает его немного более читаемым в этом случае (хотя обратите внимание, что я использую немного другой формат)

  2. мой клиент не хотел календаря, поэтому я добавил добавление класса on show / hide, чтобы сделать это, не затрагивая никаких других datepickers. Удаление класса происходит по таймеру, чтобы избежать таблица мигает, когда datepicker исчезает, что кажется очень заметным в IE.

EDIT: одна из проблем, оставшихся для решения, заключается в том, что нет способа очистить 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., parseInt(RegExp., 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
}

как и многие другие, я столкнулся с многочисленными проблемами, пытаясь сделать это, и только сочетание решений, опубликованных, и в конечном итоге большой хак, чтобы сделать его идеальным, имеет приземлился мне решение.

проблемы с другими решениями в этом потоке, которые я пробовал:

  1. выбор новой даты в datepicker также изменит (внутреннюю) дату других datepickers, поэтому, когда вы снова откроете другие (или попытаетесь получить их дату), они будет иметь другую дату, чем та, которая отображается в назначенном поле ввода.
  2. datepicker не будет "помнить" дату при открытии снова.
  3. код для жонглирования датами использовал подстроку, поэтому он не был совместим со всеми форматами.
  4. "мой monthpicker" изменил только поле ввода при его закрытии, а не всякий раз, когда значения были изменены.
  5. поле ввода не обновляется правильно, если вы вводите неправильно отформатированный ввод-строка для даты, а затем нажмите кнопку "Закрыть" на datepicker.
  6. Я не могу иметь обычные datepickers, которые показывают дни, на той же странице, что и monthpickers, которые не показывают дни.

я наконец-то нашел способ исправить все эти проблемы. Первые четыре можно исправить, просто будучи осторожным о том, как вы ссылаетесь на дату и monthpickers в своем внутреннем коде, и, конечно, делать некоторые ручные обновления ваших сборщиков. Это вы можете см. в разделе instantiation-примеры внизу. Пятая проблема может быть решена путем добавления пользовательского кода в функции datepicker.

Примечание: вам не нужно использовать следующие сценарии monthpicker, чтобы исправить первые три проблемы в вашем обычном datepicker. Просто используйте экземпляр datepicker-скрипт в нижней части этого сообщения.

теперь, чтобы использовать monthpickers и исправить последнюю проблему, нам нужно разделить datepickers и monthpickers. Мы могли бы получить один из немногих аддонов jQuery-UI monthpicker, но некоторым не хватает гибкости/способности локализации, некоторым не хватает поддержки анимации...так что делать? сверните свой "собственный" из datepicker-кода! это дает вам полностью функционирующий monthpicker, со всеми функциями datepicker, только без отображения дней.

Я поставил monthpicker JS-скрипт и сопутствующие В CSS-скрипт, используя метод, описанный ниже, с jQuery-UI v1.11.1 код. Просто скопируйте эти фрагменты кода в два новых файла, monthpicker.js и monthpicker.УСБ, соответственно.


вот процесс, который я прошел, чтобы клонировать оригинальный datepicker и сделать его monthpicker

Если вам все равно, как я это сделал, прокрутите этот раздел и вниз до строки " Теперь, чтобы добавить datepickers и monthpickers в Пейдж!"

Я взял весь код javascript из jquery-ui-1.11.1.js, относящийся к их datepicker, вставил его в новый js-файл и заменил следующие строки:

  • "datepicker" = = > "monthpicker"
  • "Datepicker" = = > "Monthpicker"
  • "выбор даты" = = > "выбор месяца"
  • "выбор даты" = = > "выбор месяца"

затем я удалил часть for-loop, которая создает весь 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...

затем я копирую / вставляю код из jQuery-ui.css, относящийся к datepickers к новому CSS-файлу, и заменил следующие строки:

  • "datepicker" = = > "monthpicker"

теперь, чтобы добавить datepickers и monthpickers на страницу!

эти следующие фрагменты кода javascript работают с несколько datepickers и / или monthpickers на странице, без вышеупомянутых проблем! исправлено обычно с помощью ' $(this). много :)

первый скрипт предназначен для обычного datepicker, а второй-для "новых" monthpickers.

из-комментирует .после, который позволяет создать некоторый элемент для очистки поля ввода, украден из ответа пола Ричардса.

Я использую формат "MM yy" в моем monthpicker, и 'yy-mm-dd' формат в моем datepicker, но это полностью совместим со всеми форматами, так что вы можете использовать любой, который вы хотите. Просто измените параметр "dateFormat". ShowButtonPanel стандартных вариантов'', 'showAnim', и 'yearRange' это конечно опционально и настраивается под ваши пожелания.


добавление datepicker

создание экземпляра 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

включить monthpicker.файл js и monthpicker.css-файл на странице, которую вы хотите использовать monthpickers.

экземпляр Monthpicker Значение, полученное из этого 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('');
    //    })
    //)
    ;

вот именно! Это все, что вам нужно сделать monthpicker.

Я не могу заставить jsfiddle работать с этим, но он работает для меня в моем ASP.NET проект MVC. Просто сделайте то, что вы обычно делаете, чтобы добавить datepicker на свою страницу и включить вышеуказанные сценарии, возможно, изменив селектор (что означает $("#MyMonthTextBox")) на что-то, что работает для тебя.

надеюсь, это кому-то поможет.

ссылки на pastebins для некоторых дополнительных настроек даты и monthpicker:

  1. Monthpicker работает в последний день месяца. Дата, которую вы получите от этого monthpicker, всегда будет последним днем месяца.

  2. два сотрудничающих monthpickers; "начало" работает в первом месяце, а "конец" работает в последнем из месяц. Они оба ограничены друг другом, поэтому выбор месяца в "конце", который находится до выбранного месяца в "начале", изменит "начало" на тот же месяц, что и "конец". И наоборот. Необязательно: при выборе месяца на "пуск", "minDate" устанавливается на "конец". Чтобы удалить эту функцию, закомментируйте одну строку в onClose (прочитайте комментарии).

  3. два сотрудничающих datepickers; они оба ограничены друг другом, поэтому выбор даты на "конец" который находится перед выбранной датой "начала", изменит "начало" на тот же месяц, что и "конец". И наоборот. Необязательно: при выборе даты на "start", "minDate" устанавливается на "end". Чтобы удалить эту функцию, закомментируйте одну строку в onClose (прочитайте комментарии).


добавить еще одно простое решение

 $(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 в том же страница: (также избегайте ошибки mutiple нажмите на предыдущую кнопку в IE, что может произойти, если мы используем функцию фокусировки)
    JS fiddle link

Мне понравился ответ @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);
}

у меня были определенные трудности с принятыми ответа и никто другой не мог быть использован с минимальными усилиями в качестве базы. Поэтому я решил настроить последнюю версию принятого ответа, пока он не удовлетворит хотя бы минимальным стандартам кодирования/повторного использования JS.

вот так гораздо более чистое решение чем 3-е (последнее) издание на Бен Келерпринятый ответ. Более того, он будет:

  • работать не только с mm/yy формат, но с любым другим, включая ОП MM yy.
  • не скрывать календарь других datepickers на странице.
  • неявно загрязнять глобальный объект JS с помощью datestr, month, year etc переменные.

зацени:

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

вот и все. Надеюсь, что вышеизложенное сэкономит некоторое время для дальнейшего читатели газеты.


Я знаю, что это немного поздний ответ, но я получил ту же проблему за пару дней до этого, и я пришел с хорошим и гладким решением. Сначала я нашел этот отличный выбор даты здесь

тогда я только что обновил класс CSS (jquery.календарпикер.css), который поставляется с примером, как это:

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

.calDay 
{
    display:none;
}

плагин запускает событие DateChanged, когда вы что-то меняете, поэтому не имеет значения, что вы не нажимаете на день (и он подходит хорошо, как год и месяц подборщика)

надеюсь, что это помогает!


Мне также нужен был сборщик месяца. Я сделал простой с годом на заголовке и 3 строками 4 месяцев ниже. Проверьте это: простой выбор месяца с jQuery.


Я пробовал различные решения, представленные здесь, и они работали нормально, если вы просто хотели пару выпадающих.

Лучший (по внешнему виду и т. д.) 'picker' (https://github.com/thebrowser/jquery.ui.monthpicker) здесь предлагается в основном копия старой версии jQuery-ui datepicker с переписанным _generateHTML. Тем не менее, я обнаружил, что он больше не играет хорошо с текущим jQuery-ui (1.10.2) и имел другие проблемы (не закрывается на esc, не закрывается другое открытие виджета, имеет жестко закодированные стили).

вместо того, чтобы пытаться исправить этот monthpicker и вместо того, чтобы повторно подключить тот же процесс с последним datepicker, я пошел с подключением к соответствующим частям существующего выбора даты.

Это предполагает переопределение:

  • _generateHTML (для построения разметки выбора месяца)
  • parseDate (так как ему не нравится, когда нет компонента дня),
  • _selectDay (as использует элемент управления 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);
};

Как говорится, это старый вопрос, но я нашел его полезным, поэтому хочу добавить обратную связь с альтернативным решением.


для monthpicker, используя 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']
});


все здесь получают значение месяца, года, как это,

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

но только что я столкнулся с проблемой при извлечении значений из > и <. Потому что он дает нам значение выбранного значения в раскрывающемся списке, поэтому он предоставляет нам old значение не new значения.

Итак, в соответствии с документом jQuery UI : -http://api.jqueryui.com/datepicker/. Мы можем сразу принести год, месяц от функции. Для других значений, таких как day так далее. мы можем легко получить к ним доступ через объект inst


Спасибо за решение Бена Келера.

однако у меня была проблема с несколькими экземплярами datepickers, причем некоторые из них требовались с выбором дня. Решение Бена Келера (в правке 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");
        }
    }
});

использовать onSelect перезвоните и удалите часть года вручную и установите текст в поле вручную