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

Question

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

Answer 1

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

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

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

.calDay 
{
    display:none;
}

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

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

Answer 2

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

Answer 3

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

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

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

Это включает переопределение:

• _generateHTML (для создания разметки средства выбора месяца)
• parseDate (как не нравится, когда нет дневного компонента),
• _selectDay (поскольку datepicker использует .html () для получения значения дня)

Поскольку этот вопрос немного устарел и уже хорошо ответил, вот только переопределение _selectDay, чтобы показать, как это было сделано:

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

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

Answer 4

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

Однако у меня была проблема с несколькими экземплярами сборщиков дат, причем некоторые из них требовались при выборе дня. Решение Бена Келера (в редакции 3) работает, но скрывает выбор дня во всех случаях. Вот обновление, которое решает эту проблему:

$('.date-picker').datepicker({
    dateFormat: "mm/yy",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    onClose: function(dateText, inst) {
        if($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1) {
            $(this).datepicker(
                'setDate',
                new Date(
                    $("#ui-datepicker-div .ui-datepicker-year :selected").val(),
                    $("#ui-datepicker-div .ui-datepicker-month :selected").val(),
                    1
                )
            ).trigger('change');
            $('.date-picker').focusout();
        }
        $("#ui-datepicker-div").removeClass("month_year_datepicker");
    },
    beforeShow : function(input, inst) {
        if((datestr = $(this).val()).length > 0) {
            year = datestr.substring(datestr.length-4, datestr.length);
            month = datestr.substring(0, 2);
            $(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
            $(this).datepicker('setDate', new Date(year, month-1, 1));
            $("#ui-datepicker-div").addClass("month_year_datepicker");
        }
    }
});

Answer 5

для средства выбора месяца, используя JQuery v 1.7.2, у меня есть следующий javascript, который делает именно это

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

Answer 6

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