jQuery UI Datepicker — додавання можливості вибору декількох дат на одному календарі

imageВсім привіт, дорогі читачі Хабра!

Стаття присвячена jQuery UI і його віджету вибору дат.

Часто буває, що на сторінці необхідно зробити вибір періоду дат (а інколи навіть кількох розрізнених дат). Але Datepicker від jQuery UI дозволяє вибирати тільки одну дату в межах одного календаря.

Тому частим рішенням на практиці є створення двох полів вводу з контролем за типом «від і до». Також можна знайти багато «костыльных» способів для вирішення даної задачі — це нам не підходить.

Отже, наша мета — вирішити завдання самими мінімальними зусиллями використовуючи тільки jQuery UI Datepicker.

Для вирішення цього завдання існує невелика розширення для jQuery UI Datepicker, яке збільшує його стандартні можливості без підключення сторонніх віджетів, плагінів і стилів.

Для тих, кому не принципово використовувати стандартний віджет $.datepicker(), я приготував кілька посилань, сподіваюся ви також визнаєте їх корисними:

— Стаття про PickMeUp на хабре (вибір кількох дат, вибір періоду).
— Чудовий плагін DateTimePicker від XDSoft (вибір періоду дат, можливість вибору часу й інші різноманітні фічі), варто подивитися

Є й інші рішення, але я не буду на них зупинятися. Якщо у вас є свої улюблені календарі вибору дат — буду радий прочитати про них у коментарях до статті.

Опис розширення
Розширення являє собою файл, який розширює можливості віджета $.datepicker(), використовуючи його об'єктну модель. Не виляє на працездатність Datepicker в дефолтному режимі. Тому не варто турбуватися про те, що ваш (вже написаний) код перестане працювати або почне функціонувати інакше.

Розширення дозволяє змінити поведінку вибору дати в двох режимах:
  • Вибір періоду (дві дати: початок і закінчення періоду)
  • Вибір кількох дат (масив дат)
Так як розширення планується використовувати для вибору декількох дат то рекомендую його застосовувати до елемента DIV (а не INPUT), а при виборі дат заповнювати відповідні значення поля вода (див. приклади в кінці статті).

Нові можливості віджета

Нові параметри $.datepicker()

$('#date_range').datepicker({
range: 'period', // можливі значення: period, multiple
range_multiple_max: 3, // максимальне число обраних дат у режимі "Кілька дат"
onSelect: function(dateText, inst, extensionRange) {
// extensionRange - доданий зворотний аргумент, містить у собі об'єкт розширення
}
});

// Метод "setDate" тепер може приймати масив: 2 елемента при range="period" або більш елементів при range="multiple" 
// $('#date_range').datepicker('setDate', ['+2d', '+1w']);

// рекомендується використовувати подія "onSelect" для змінення значень полів форми (або мінливих вашого скрипта)
// однак для більш гнучкого управління, можна отримати об'єкт розширення і працювати з інформацією про вибрані дати
var extensionRange = $('#date_range').datepicker('widget').data('datepickerExtensionRange');

console.log(extensionRange.datesText); // масив дат (дата в форматі, що використовується в datepicker)
console.log(extensionRange.startDateText); // початок періоду (дата в форматі, що використовується в datepicker)
console.log(extensionRange.endDateText); // кінець періоду (дата в форматі, що використовується в datepicker)

console.log(extensionRange.dates); // масив дат (об'єкт дати)
console.log(extensionRange.startDate); // початок періоду (об'єкт дати)
console.log(extensionRange.a list); // кінець періоду (об'єкт дати)

Нові стилі у клітинок календаря

.selected{} /* выбранныя дата */
.selected-start{} /* перша дата періоду */
.selected-end{} /* остання дата періоду */
.first-of-month{} /* перша дата місяця */
.last-of-month{} /* остання дата місяця */

Приклад 1 — вибір періоду
Приклад 2 — вибір декількох дат

Завантажити — jquery.datepicker.extension.range.min.js
підключати необхідно відразу після скриптів jQuery UI
потрібно оригінальний віджет Datepicker jQuery UI
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.