Настройка jQuery UI DatePicker: отображение только месяца и года

Быстрый ответ

Преобразуйте элемент "jQuery UI DatePicker" в инструмент выбора только месяца и года с помощью следующих настроек:

$("#yourElement").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));
    },
    beforeShow: function(input, inst) {
        // Перед отображением элемента
        var date;
        try {
            date = $.datepicker.parseDate(inst.settings.dateFormat, input.value);
        } catch (error) {
            date = null;
        }
        $(this).datepicker('option', 'defaultDate', date);
        $(this).datepicker('setDate', date);
        setTimeout(function(){
            $('#ui-datepicker-div').toggleClass('hide-calendar');
        }, 1);
    }
});

/* Скрываем календарные дни, поскольку нам нужны только месяц и год */
.hide-calendar .ui-datepicker-calendar {
    display: none;
}

/* Задаём конечный стиль для элемента */
.hide-calendar .ui-datepicker-inline {
    width: auto;
}

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

Более глубокое погружение в пользовательский опыт

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

Визуализация

Настройка jQuery UI DatePicker напоминает сборку уникального календаря из деталей "Лего":

Стандартный вид календаря:  [📅📆📆📆]
После трансформации: [📅🔄]

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

$(".selector").datepicker({
  changeMonth: true,     // Возможность изменять месяц
  changeYear: true,      // Возможность изменять год
  showButtonPanel: true, // Отображение панели управления
  dateFormat: 'MM yy'    // Формат даты – месяц и год
});

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

Неограниченные возможности настройки

Настройте DatePicker исходя из своих потребностей:

Расширьте функционал с помощью дополнительных параметров

Сконфигурируйте глобальные параметры по умолчанию, применяя $.extend():

$.extend($.datepicker, {
    // Ваши настраиваемые параметры
});

Подробнее об этом расскажет наш спикер на видео

Сделано с любовью

Подключите файл стилей jQuery UI CSS для создания привлекательного внешнего вида:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

Для создания уникального дизайна не ограничивайте себя общими стилями.

.ui-datepicker-title {
    /* Ваши стили */
}

Проверка работоспособности

Гарантируйте безупречную работу DatePicker во всех поддерживаемых вами браузерах.

Проблемы? Не проблема!

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

События жизненного цикла

Вы можете использовать beforeShowDay для блокировки определённых дат, а onSelect позволит реагировать на выбор даты.

Полезные материалы

1. Datepicker | jQuery UI — официальная информация о DatePicker.
2. Datepicker Widget | jQuery UI API Documentation — документация API.
3. Stack Overflow — обсуждение вопроса о том, как отображать только месяц и год.
4. Issues · jquery/jquery-ui · GitHub — вопросы по DatePicker на GitHub.
5. CodeProject – CodeProject — руководство по отображению DatePicker только с месяцем и годом.
6. C# Corner — советы по упрощению jQuery UI DatePicker для выбора только месяца и года.