it-swarm.com.ru

jQuery UI DatePicker, чтобы показать только месяц год

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

362
Aanu

Вот хак (обновленный с помощью всего файла .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>

EDIT jsfiddle для приведенного выше примера: http://jsfiddle.net/DBpJe/7755/

РЕДАКТИРОВАТЬ 2 Добавляет значение месяца и года в поле ввода только при нажатии кнопки Готово. Также позволяет удалить значения поля ввода, что невозможно в указанном выше поле http://jsfiddle.net/DBpJe/5103/

РЕДАКТИРОВАТЬ 3 обновил Лучшее решение на основе решения rexwolf вниз.
http://jsfiddle.net/DBpJe/5106

411
Ben Koehler

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

<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

78
Leniel Maccaferri

@ Бен Келер это префект! Я сделал небольшую модификацию, так что использование одного экземпляра выбора даты более одного раза работает, как и ожидалось. Без этого изменения дата анализируется неправильно, а ранее выбранная дата не выделяется.

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

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

Это решит проблему =) Но я хотел время отформатировать гггг-мм

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

10
Erik Polder

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

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

9
Anthony Shaw

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

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

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

 $(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
5
Chinh Phan

Я объединил многие из вышеупомянутых хороших ответов и пришел к этому:

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

patch1: в _showDatepicker: чтобы сгладить шкуру;

patch2: in _checkOffset: исправить положение выбора месяца (в противном случае, когда поле находится внизу браузера, проверка смещения отключена);

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

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

5
rexwolf

Мне нужно было выбрать месяц/год для двух полей (From & To), и когда одно из них было выбрано, Max/Min было установлено для другого ... а-ля выбираются даты авиабилетов. У меня были проблемы с настройкой 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; }
5
Amy Struck

Это только у меня так или не работает как должно в 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>
4
Tom Van Schoor

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

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

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

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

3
Reigel

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

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

        }
    });
3
PYT

Если вы ищете средство выбора месяца, попробуйте это jquery.mtz.monthpicker

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

3
user2630080

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

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

  1. Выбор новой даты в устройстве выбора даты также приведет к изменению (внутренней) даты других средств выбора даты, поэтому при повторном открытии других (или попытке получить их дату) они будут иметь другую дату, чем та, которая отображается в назначенном им входе. -field.
  2. DatePicker не будет "помнить" дату при повторном открытии.
  3. Код для манипулирования датами использовал подстроку, поэтому он не был совместим со всеми форматами.
  4. "Мой ежемесячник" изменял поле ввода только при его закрытии, а не всякий раз, когда значения менялись.
  5. Поле ввода не обновляется правильно, если вы введете неправильно отформатированную строку ввода для даты, а затем нажмете "Закрыть" в средстве выбора даты.
  6. У меня не может быть нормальных сборщиков дат, которые показывают дни, на той же странице, что и сборщики месяцев, которые не показывают дни.

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

ПРИМЕЧАНИЕ: Вам НЕ нужно использовать следующие сценарии выбора месяца, чтобы исправить первые три проблемы в обычном средстве выбора даты. Просто используйте скрипт создания даты в нижней части этого поста.

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

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


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

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

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

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

Затем я удалил часть цикла for, которая создает весь div ui-datepicker-calendar (остальные решения скрываются с помощью CSS). Это можно найти в функции _generateHTML: (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"

Теперь, чтобы добавить даты и месяцы на страницу!

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

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

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

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


Добавление указателя даты

Создание экземпляра Datepicker. Это происходит с 90 лет назад и до наших дней. Это поможет вам сохранить правильность поля ввода, особенно если вы установите параметры defaultDate, 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 на страницу, которую вы хотите использовать.

Создание экземпляра 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. Просто сделайте то, что вы обычно делаете, чтобы добавить указатель даты на свою страницу и включить вышеупомянутые сценарии, возможно, изменив селектор (то есть $ ("# MyMonthTextBox")) на то, что вам подходит.

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

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

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

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

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

3
Ultroman the Tacoman

Если кто-то хочет это также для нескольких календарей, добавить эту функциональность все же в интерфейс jquery не очень сложно. с минимизированным поиском:

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

добавить это перед х

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 и предоставьте настройки 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 здесь ключ :)

3
prdatur

Что касается: http://www.mattkruse.com/javascript/calendarpopup/

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

2
Roger

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

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

  • работать не только с форматом mm/yy, но и с любым другим, включая MM yy OP.
  • не скрывать календарь других людей на странице.
  • неявно загрязнять глобальный объект JS переменными datestr, 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;
}

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

2
Alexander Abakumov

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

Сделал пару уточнений почти идеального ответа BrianS выше:

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

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

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

Правка 2: Мне не удалось решить это красиво (т.е. без добавления отдельной кнопки Очистить рядом с вводом), поэтому в конечном итоге просто использовать это: https://github.com/thebrowser/jquery.ui.monthpicker - если бы кто-нибудь мог заставить стандартный интерфейс сделать это, это было бы удивительно.

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

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

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

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

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

Вам также нужно это правило стиля:

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

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

Лучшее (по внешнему виду и т.д.) Средство выбора ( https://github.com/thebrowser/jquery.ui.monthpicker ), предложенное здесь, в основном является копией старой версии средства выбора даты jquery-ui с _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);
};

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

1
freedomn-m

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

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

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

.calDay 
{
    display:none;
}

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

Надеюсь, поможет!

1
pjnovas

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

1
Tiago Coelho

для средства выбора месяца, используя 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']
});

0
Ricardo Appleton

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

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