JQuery календар (datePicker). JQuery UI API - елемент вибору дати (Datepicker Widget) Календар jquery ui datepicker
Всім привіт, любі читачі Хабра!
Стаття присвячена jQuery UI та його віджету вибору дат.
Часто буває, що на сторінці необхідно зробити вибір періоду дат (іноді навіть кількох розрізнених дат). Але Datepicker з jQuery UI дозволяє вибирати лише одну дату в межах одного календаря.
Тому частим рішенням практично є створення двох полів введення з контролем на кшталт «від і до». Також можна знайти багато «милицьких» способів для вирішення цього завдання – це нам не підходить.
Отже, наша мета – вирішити завдання найменшими зусиллями використовуючи тільки jQuery UI Datepicker.
Для вирішення цього завдання існує невелике розширення для jQuery UI Datepicker, яке збільшує його стандартні можливості без підключення сторонніх віджетів, плагінів та стилів.
Для тих, кому не важливо використовувати стандартний віджет $.datepicker(), я приготував пару посилань, сподіваюся ви також вважаєте їх корисними:
Стаття про хабре (вибір кількох дат, вибір періоду).
- Прекрасний плагін DateTimePicker від XDSoft (вибір періоду дат, можливість вибору часу та інші різноманітні фічі), варто подивитися
Є й інші рішення, але я не на них зупинятимуся. Якщо у вас є свої улюблені календарі вибору дат, буду радий прочитати про них у коментарях до статті.
Опис розширення Розширення є файлом, який розширює можливості віджету $.datepicker(), використовуючи його об'єктну модель. Не впливає на працездатність 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.endDate); // Закінчення періоду (об'єкт дати)
Нові стилі біля осередків календаря
Selected() /* обрані дата */ .selected-start() /* перша дата періоду */ .selected-end() /* остання дата періоду */ .first-of-month() /* перша дата місяця */ .last-of-month() /* остання дата місяця */
На одному з уроків ми навчилися різними способами підключати бібліотеку jQuery UI . Сьогодні темою уроку буде віджет вибору дати - jQuery UI Datapicker.
Навіщо потрібний цей віджет? Щоб надати користувачеві під час введення дати календар, під час заповнення форми не треба думати у якому форматі вбивати дати. У свою чергу адмін ресурсу отримує дані в однаковому форматі.
За цією адресою: https://jqueryui.com/datepicker/Ви побачите кілька варіантів віджету datapicker , ми розглянемо лише два основних.
jQuery UI Datepicker - Display month & year menusКоли користувач клацає мишкою в текстове поле введення input , з'являється календар із вибором дати та додаткового меню з вибором місяця та року. Варіант з однією датою підходить на сайтах, де клієнт вказує, наприклад, дату свого візиту.
HTML-код складається з одиночного тега input з ідентифікатором "datapicker" оберненого абзац - тег p . Замість абзацу цей input можна помістити в будь-який блоковий елемент сайту.
Date:
Код jQuery необхідно скопіювати (view source) та вставити на свій сайт, як у прикладі. Після завантаження DOM дерева будемо отримувати елемент за ідентифікатором #datapicker в текстове поле і викликати метод .datepicker . Тепер треба в метод передати об'єкт, в якому описати додаткові налаштування: changeMonth: true, changeYear: true . Тепер з'явилася можливість через список вибрати місяць і рік, це трохи зручніше, ніж робити аналогічний вибір через календар.
$(function() (
$("#datepicker").datepicker((
changeMonth: true,
changeYear: true
});
});
Віджет Datapicker з вибором діапазону дати Date Range підходить для сайтів із системою бронювання. Користувач вказує у першому календарі початкову дату, а другому календарі кінцеву. Створимо два текстові поля input з ідентифікатором "from" і "to" і два label прив'язані до своїх текстових полів.
від
to
Отримуємо елемент із ідентифікатором #from - перше текстове поле, у ньому викликаємо метод datapicker.
$(function() (
var dateFormat = "mm/dd/yy",
from = $("#from")
.datepicker((
Задамо дату за замовчуванням плюс один тиждень.
DefaultDate: "+1w",
Можливість міняти місяць за допомогою списку, що випадає.
ChangeMonth: true,
numberOfMonths: 3 ))
Коли відбудеться подія on , тобто користувач що-небудь вибере зі списку, що випадає, то при зміні обраної дати знаходимо другий datepicker і встановлюємо мінімальну дату, рівну обраної.
On("change", function() (
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#to").datepicker
При зміні вибраної дати знаходимо перший datepicker і встановлюємо максимальну дату, що дорівнює вибраній.
On("change", function() (
from.datepicker("option", "maxDate", getDate(this));
});
Весь код та візуальні приклади всіх варіантів з різними параметрами віджету jQuery Datapicker є на сайті jqueryui.com.
jQuery UI Datepicker - Localize calendarЗа промовчанням календар відображається англійською мовою, але це можна змінити, бібліотека jQuery UI підтримує мультимовність.
Завантажуємо потрібний мовний файл на Github
Підключаємо потрібний мовний модуль у тег head.
Створюємо текстове поле для календаря і список, що випадає з id "locale" з перерахуванням потрібних мов.
Date:
English
Russian (Українська)
Після завантаження DOM дерева, шукаємо об'єкт datapicker . Змінюємо налаштування для всіх datepicker.
$(function() (
$("#datepicker").datepicker($.datepicker.regional["ru"]);
Зміна локалізації для "datepicker".
$("#locale").on("change", function() (
Зміна локалізації при виборі нового значення у списку, що випадає.
$("#datepicker").datepicker("option",
$.datepicker.regional[ $(this).val() ]);
Віджет Datepicker
Ця стаття присвячена віджету Datepicker - зручному інтерактивному календарю, що полегшує введення дат. Отримання користувачів календарної інформації у вигляді тексту завжди є джерелом проблем, оскільки для вираження дат існує безліч різних форматів. Віджет Datepicker полегшує вибір дати та її подання в уніфікованому вигляді, тим самим знижуючи ймовірність появи помилок.
Створення віджету DatepickerІснують два основні способи створення віджету Datepicker. Найчастіше його приєднують до елемента input за допомогою методу datepicker(). Негайної зміни зовнішнього вигляду елемента при цьому не відбувається, але як тільки елемент отримає фокус введення (при виконанні клацання на ньому або переході до нього від інших елементів за допомогою клавіші ), поряд з ним з'явиться календар, за допомогою якого можна буде вибрати потрібну дату.
Календарі описаного типу спливаючими календарями. Приклад створення такого календаря наведено нижче:
jQuery UI input (width: 200px; text-align: left) $(function() ( $("#datep").datepicker(); )); Дата:
На малюнку показано, що відбувається при переміщенні фокусу у полі введення:
Користувач може ввести дату вручну, або вибрати її за допомогою календаря. Як тільки елемент input втратить фокус або натисне клавішу (або ), календар зникне.
Локалізація віджету DatepickerЯк ви бачите, у наведеному прикладі календар відображається англійською мовою. У віджеті jQuery UI Datepicker забезпечено досить вичерпну підтримку різних стандартів форматування дат, що використовуються по всьому світу, що включає 61 варіант локалізації. Для отримання доступу до них необхідно імпортувати до документа один допоміжний сценарій JavaScript та вказати віджету Datepicker, який варіант локалізації повинен використовуватись. Відповідний приклад наведено нижче:
... ... $(function() ( $("#datep").datepicker($.datepicker.regional["ru"]); )); ...
Файл jquery-ui-i18n.js знаходиться у папці development-bundle/ui/i18n архівного файлу бібліотеки jQuery UI, який ви повинні були завантажити з сайту jqueryui.com. Скопіюйте його в ту ж папку, в якій знаходиться вихідний файл, і додайте його в документ, як показано в коді. Результат представлений малюнку:
Другий спосіб використання віджету Datepicker передбачає його вбудовування в документ. Для цього слід вибрати елемент div або span за допомогою jQuery та викликати метод datepicker(). Вбудований календар відображається весь час, поки не видно HTML-елемент, на основі якого він створений. Приклад створення вбудованого календаря наведено нижче:
jQuery UI label (margin-right:12px; ) input (width: 200px; text-align: left; margin-right: 10px) #wrapper > * (float: left) $(function() ( $("#inline" ).datepicker($.datepicker.regional["ru"]); Дата:
У цьому прикладі як базовий HTML-елемент для створення віджета Datepicker використовується елемент span. Результат представлений на малюнку:
Вбудований календар може бути корисним, якщо ви не хочете працювати зі спливаючими об'єктами. Звісно, існують додатки, у яких робота з датами ведеться настільки інтенсивно, що сенс постійно мати календар під рукою. Але в більшості випадків доцільно залишати календар прихованим доти, доки в ньому не виникне потреба.
Проблеми з приховуванням та відображенням вбудованого віджета Datepicker обумовлені тим, що його додавання до документа тягне за собою необхідність зміни компонування сторінки, що може породжувати проблеми представлення. На мій погляд, в більшості ситуацій набагато зручніше використовувати віджет, що спливає.
Налаштування віджету DatepickerЯкщо раніше вам вже доводилося мати справу з обробкою дат, то вам добре відомо, наскільки складно працювати з цією категорією даних. Відображенням цієї складності є численність властивостей, що підтримуються віджетом Datepicker. Опису груп родинних властивостей, за допомогою яких налаштовується цей віджет, присвячено кілька наступних розділів.
Базові налаштуванняДеякі параметри конфігурації використовуються для налаштування базових властивостей спливаючих і вбудованих календарів. Ці властивості дуже важливі, оскільки дозволяють керувати інтеграцією віджету документ. Їх перелік наведено у таблиці нижче:
| altField | Дозволяє вказати додаткове поле, яке буде оновлюватися при виборі дати в календарі |
| buttonImageOnly | Вказує, що замість допоміжної кнопки, яка дозволяє відкрити календар, слід використовувати зображення, задане опцією buttonImage |
| buttonImage | Визначає URL-адресу зображення, яке використовується для допоміжної кнопки відкриття календаря. За замовчуванням не використовується |
| buttonText | Визначає текст, який відображатиметься на кнопці відкриття календаря. Текст за замовчуванням є багатокрапкою (...) |
| defaultDate | Дозволяє встановити дату, яка буде підсвічена під час відкриття календаря |
| disabled | Вказує, чи віджет повинен бути спочатку відключений. Значення за промовчанням - false |
| showOn | Визначає дію, що ініціює відкриття календаря, що спливає. Значення за замовчуванням - focus |
Найпростіше налаштування одночасно є і найкориснішим. За допомогою опції defaultDate можна вказати дату, яка автоматично підсвічуватиметься при відкритті календаря.
Якщо значення defaultDate не встановлено, замість нього використовується поточна дата. (Зрозуміло, тут мається на увазі дата, встановлена в системі користувача. Встановлення часових поясів, перехід на літній час, неправильно налаштована конфігурація - все це може стати причиною того, що дата, що відображається для користувача, не збігатися з тією, на яку ви розраховуєте. )
Ця опція використовується лише у разі відсутності атрибута value в елементі input. Якщо цей атрибут присутній (незалежно від того, включений він в документ вами або з'явився в результаті попереднього вибору користувачем), віджет Datepicker буде використовувати його значення value.
Якщо необхідно, щоб календар відкривався з іншою початковою датою, можна встановити її, скориставшись одним із способів, описаних у таблиці нижче:
| null | Використовується поточна дата |
| Об'єкт Date | Використовується значення, подане як JavaScript-об'єкт Date |
| +Дні,-дні | Використовується дата, яка відрізняється від поточної дати на вказану кількість днів. Так, +3 означає дату, яка настане через три дні після поточної, а -2 – дату дводенної давності |
| +1d +7w -1m +1y | Використовується дата, яка відраховується від поточної дати та виражається за допомогою кількості днів (d), тижнів (w), місяців (m) та років (y), що визначають величину зсуву дати вперед (+) або назад (-) за часом. Допускається змішування позитивних та негативних значень в одній даті. Наприклад, комбінації значень -1d +1m, що використовується спільно з датою 12 листопада 2011 року, відповідає 11 грудня 2011 року. |
Приклад використання опції defauitDate для вказівки дати, яка настане через п'ять років, наведено нижче:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( defaultDate: "+5y" )); ));
Припустимо, що поточній даті відповідає грудень 2013 року. Тоді, як показано на малюнку нижче, дати, яка визначається значенням опції defauitDate, відповідає грудень 2018 року:
Описаний формат вказівки відносних дат зустрінеться вам ще раз. Це дуже гнучкий формат, що забезпечує необхідну точність. Так само, як це зроблено в прикладі, можна опустити будь-який інтервал, який не збираєтеся змінювати. Наприклад, замість значення "+0d +0w +0m +5y" можна використовувати значення "+5y". У цьому форматі зручно те, що він допускає змішування позитивних і негативних значень різних інтервалів, що дозволяє точно визначити потрібну дату.
Визначення події, що ініціює відкриття календаря, що спливає.Опція showOn дозволяє керувати подією, у відповідь на яку має відображатися календар. Ця опція може приймати одне із трьох значень:
focusСпливаючий календар відкривається при отриманні фокусу введення елементом input. Це значення використовується за умовчанням.
buttonКалендар, що спливає, відкривається клацанням на кнопці.
bothКалендар, що випливає, відображається як після клацання на кнопці, так і після отримання фокусу елементом input.
У разі використання значень button або both віджет Datepicker створює елемент button і поміщає його до документа безпосередньо після елемента input. Приклад використання опції showOn наведено нижче:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn: "both" )); ));
Як показано малюнку, у документі з'явилася кнопка. Оскільки в цьому прикладі опції showOn присвоєно значення both, календар, що спливає, буде відображатися як при клацанні на кнопці, так і при отриманні фокусу елементом input.
Кнопка, яка додається віджетом Datepicker, не є віджетом Button jQuery UI. Якщо ви хочете, щоб усі кнопки були однотипними, виберіть елемент button та викличте метод button() jQuery UI.
Елемент button можна стилізувати за допомогою опцій buttonImage та buttonText. Якщо задати в опції buttonImage URL-адресу зображення, віджет Datepicker помістить це зображення на кнопку. Крім того, пов'язаний з кнопкою текст, заданий за умовчанням (три крапки), можна замінити іншим текстом за допомогою опції buttonText, як показано в прикладі нижче:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn: "both", buttonText: "Вибрати" )); ) );
Спільно використовуючи опції buttonImage та buttonImageOnly, можна взагалі позбутися кнопки, замінивши її зображенням. Відповідний приклад наведено нижче:
jQuery UI label (margin-right:12px) input (width: 200px; text-align: left) #dpcontainer * (vertical-align: middle) #dpcontainer img (width: 35px;) $(function() ( $.datepicker .setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showon: "both", buttonImage: "right.png", buttonImageOnly: true )); Дата:
У цьому прикладі задається зображення right.png, а для опції buttonImageOnly встановлюється значення true. Крім того, до документа додано кілька CSS-стилів, що управляють розміщенням зображення щодо елементів label та input. Віджет Datepicker не може самостійно визначити, куди саме слід помістити елемент img, тому для правильного розташування цього елемента img в документі довелося застосувати стилі CSS. Результат використання зображення замість кнопки представлений малюнку:
Призначення віджету Datepicker - надати користувачеві можливість вибрати дату, але у багатьох випадках цей процес потрібно вводити деякі обмеження. У таблиці нижче описано налаштування, що дозволяють встановлювати обмеження, що змушують користувача вибирати лише допустимі дати:
| changeMonth | Якщо ця опція дорівнює true, то в календарі відображається список, що розкривається, що забезпечує можливість безпосередньої навігації по місяцях. Значення за промовчанням - false |
| changeYear | Якщо ця опція дорівнює true, то в календарі відображається список, що розкривається, що забезпечує можливість безпосередньої навігації за роками. Значення за промовчанням - false |
| constrainInput | Якщо ця опція дорівнює true, віджет Datepicker перевіряє відповідність вмісту поля введення заданому формату дати. Значення за промовчанням - true |
| hideIfNoPrevNext | Якщо ця опція дорівнює true, то значки, що дозволяють переміщатися за календарем вперед і назад щодо дати, що відображається, повністю приховуються, а не просто відключаються. Значення за промовчанням - false |
| maxDate | Визначає максимальну дату для вибору. За замовчуванням це обмеження відсутнє |
| minDate | Визначає мінімальну дату для вибору. За замовчуванням це обмеження відсутнє |
| numberOfMonths | Визначає кількість місяців, що одночасно відображаються в календарі. Значення за промовчанням - 1 |
| showCurrentAtPos | Якщо для календаря встановлено одночасне відображення кількох місяців, то ця опція визначає номер позиції, в якій повинен відображатися поточний або заданий за замовчуванням місяць. Значення за промовчанням - 0 |
| stepMonths | Визначає, на скільки місяців вперед або назад повинна зрушуватися дата, що відображається в календарі, при клацанні на кнопці переходу вперед або назад у часі |
| yearRange | Визначає діапазон років, доступних для вибору в списку, що розкривається, що додається за допомогою опції changeYear. За замовчуванням цей список включає десять попередніх та десять наступних років, а також поточний рік |
Надавши опції constrainInput значення true, можна обмежити введення символів у текстовому полі лише тими символами, які відповідають строго певному формату. Допустимий набір символів визначається налаштуваннями локалізації, про яку йшлося вище. Якщо локалізація віджета Datepicker не виконувалася, слід очікувати, що до набору допустимих символів входитимуть лише цифри та символ косої риси (/).
Використання зазначеного значення constrainInput ще не означає, що користувач не зможе ввести неприпустиму дату, наприклад 99/99/99, але сприяє значному зменшенню ймовірності виникнення помилок. Значення цієї настройки ще більше зростає, якщо для опції showOn встановлено значення button, оскільки в цьому випадку календар, що випливає, не буде автоматично відкриватися при отриманні фокуса полем введення.
Зазвичай користувачі охоче використовують календар для вибору дати, але вони повинні його бачити. Якщо календар не відображається на екрані, то далеко не кожен користувач здогадається, що для відкриття календаря достатньо клацнути на кнопці. Будь-яка можливість безпосереднього введення дати в текстовому полі, яку ви надаєте користувачеві, збільшує ймовірність того, що формат введеної дати виявиться неправильним. Приклад використання опції constrainInput наведено нижче:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"])); $("#datep").datepicker(( constrainInput: true, minDate: "-3", maxDate: "+ 1")); ));
Тут значення true надається опції constrainInput лише для наочності, оскільки воно є значенням за умовчанням для цієї опції. Інші дві опції дозволяють обмежити діапазон дат доступних для вибору, мінімальною та максимальною датою.
Як і у випадку опції defaultDate, яка розглядалася раніше, як значення опцій minDate і maxDate можуть використовуватися null (дата не визначена), JavaScript-об'єкт Date, число днів і рядок відносної дати. У цьому прикладі вибрано числове подання, що вказує кількість днів, що відраховуються щодо поточної дати.
На малюнку видно, що Datepicker відключає комірки календаря, недоступні для вибору:
Зверніть увагу, що кнопки перемикання місяців автоматично відключаються, якщо в них немає потреби. Ці кнопки розміщуються ліворуч і праворуч вгорі календаря і дозволяють швидко переходити до наступного або попереднього місяців. Як показано на малюнку, всі доступні для вибору дати відносяться до поточного місяця, тому обидві кнопки відключені. У таких ситуаціях ці кнопки за необхідності можна повністю приховати, встановивши для опції hideIfNoPrevNext значення true.
Значення minDate не обов'язково має відноситися до минулого, а значення maxDate - до майбутнього, так само як не обов'язково задавати одночасно обидва значення. Щоб надати користувачеві можливість вибирати дати з діапазону, якому передує якийсь "підготовчий" період, можна присвоїти опції minDate значення, що стосується майбутнього, і тим самим позбавити користувача можливості вибору дат, що відносяться до згаданого періоду, як показано в прикладі нижче:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( minDate: "+4" )); ))
У цьому прикладі ми вказали, що користувач не повинен бути доступний для вибору дати, що передує тій, яка настане через 4 дні після поточної дати. Значення опції maxDate не визначено, і це означає, що користувач зможе вибрати будь-яку дату, яка йде за вказаним "періодом затримки". Результат представлений на малюнку:
Зверніть увагу, що кнопка переходу до наступного місяця в цій ситуації включена, тоді як кнопка переходу до попереднього місяця відключена (через відсутність дат, що стосуються минулого, які були б доступні користувачеві для вибору).
Опції minDate та maxDate працюють у поєднанні з опцією defaultDate, звідки випливає, що прив'язка діапазонів до поточної дати не є обов'язковою.
Створення календаря, який відображає одночасно кілька місяцівВіджет Datepicker дозволяє встановити кількість місяців, які повинні одночасно відображатися в календарі за допомогою опції numberOfMonths. Це можна зробити, вказавши або необхідну кількість місяців, або масив двох елементів, що визначає розміри місячної календарної сітки.
У прикладі нижче реалізований підхід, заснований на використанні масивів, який я вважаю найбільш пристосованим для вбудованих віджетів Datepicker, оскільки для віджетів розмір сітки часто виявляється занадто великим (до обговорення цього питання ми ще повернемося).
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( numberOfMonths: )); ));
У цьому прикладі задана календарна сітка, висота якої відповідає одному місяцю, а ширина – трьом. Результат представлений на малюнку:
Масив з двох елементів еквівалентний числовому значенню 3. Якщо значення опції numberOfMonths задано у вигляді числа, віджет відображає відповідну кількість місяців в одному ряду.
Причина, через яку я рідко використовую описаний підхід, коли працюю з календарями, що спливають, полягає в тому, що у випадку великих сіток доводиться робити певні припущення щодо розмірів вікна браузера і дисплея. Вікно спливаючого віджету Datepicker не є діалоговим вікном операційної системи. Воно є майстерно стилізованим HTML-елементом, який відображається як частина HTML-документа. Це означає, що при відображенні великих календарних сіток на невеликому екрані або в маленькому вікні браузера значна частина інформації, що міститься в документі, виявиться зміщеною за межі екрана.
Надання прямого доступу до місяців та роківЗамість того, щоб просто відображати місяці і роки в заголовку календаря, можна забезпечити прямий доступ до відповідних періодів часу за допомогою списків, що розкриваються. Ця можливість дозволяє прискорити роботу в тих випадках, коли користувачам доводиться вибирати дати в широкому діапазоні можливих значень, і реалізується за допомогою опцій changeMonth та changeYear.
Присвоєння значення true будь-якої з цих опцій активізує відповідний список, що розкривається, причому допускається незалежне управління активізацією цих списків. Приклад використання цих опцій наведено нижче:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"])); $("#datep").datepicker(( changeMonth: true, changeYear: true, yearRange: "-1:+ 2")); ));
У цьому сценарії активізовані обидва списки, що розкриваються. Крім того, для обмеження діапазону років, між якими користувачеві дозволені переходи, використовується опція yearRange. Необхідний діапазон вказано за допомогою значення "-1:+2", яке означає, що в календарі користувачеві дозволено переходи в межах одного року тому і два роки вперед щодо поточного року.
Списоки, що розкриваються, і заданий діапазон років відображені на малюнку:
При визначенні річних діапазонів за допомогою опції yearrange можна вказувати фактичні роки. Так, у цьому прикладі можна було б зазначити значення: "2012:2015".
Керування зовнішнім виглядом віджету DatepickerІснує ціла низка властивостей, що дозволяють налаштовувати зовнішній вигляд віджету Datepicker при його відображенні для користувача. Для виконання звичайних завдань, пов'язаних із вибором дати, можна задовольнитись зовнішнім виглядом календаря, що використовується за умовчанням, з яким ви вже знайомі за попередніми прикладами, проте можливість налаштування зовнішнього вигляду відповідно до завдань конкретної веб-програми надзвичайно корисна.
Властивості, що забезпечують можливість зміни зовнішнього вигляду віджету Datepicker, наведено в таблиці нижче:
| appendText | Задає текст підказки, що містить додаткову інформацію, наприклад, пояснення щодо форматування дати, який буде вставлено в документ після елемента input |
| closeText | Задає текст для кнопки закриття календаря, яка відображається на панелі допоміжних кнопок, якщо вона увімкнена. Значення за промовчанням - "Закрити" |
| currentText | Задає текст для кнопки повернення до поточного місяця, що відображається на панелі допоміжних кнопок, якщо вона увімкнена. Значення за промовчанням - "Сьогодні" |
| duration | Вказує швидкість або тривалість виконання анімації, заданої опцією showAnim. Значення за промовчанням - normal |
| gotoCurrent | Якщо ця опція дорівнює true, то кнопка "Сегодня", яка знаходиться на панелі допоміжних кнопок, якщо вона увімкнена, буде здійснювати повернення до обраної, а не до поточної дати. Значення за промовчанням - false |
| selectOtherMonths | Якщо ця опція дорівнює true, то стають доступними для вибору дати, що відображаються в результаті установки рівним true значення опції showOtherMonths |
| showAnim | Визначає тип анімації, що використовується для відображення та приховування календарів, що спливають. Значення за промовчанням - false |
| showButtonPanel | Якщо ця опція дорівнює true, то в календарі буде відображатися допоміжна панель з кнопками, за допомогою яких користувач зможе переходити до поточної дати і (якщо використовується віджет, що спливає) закривати календар. Значення за промовчанням - false |
| showOptions | Задає опції анімації, вказаної опцією showAnim |
| showOtherMonths | Якщо ця опція дорівнює true, порожні поля в календарній сітці будуть заповнюватися датами з попередніх і наступних місяців. Значення за промовчанням - false |
| showWeek | Якщо значення цієї опції дорівнює true, то в календарі відображатиметься стовпець із номерами тижнів. Значення за промовчанням - false |
| weekHeader | Задає заголовок стовпця календаря з номерами тижнів, увімкненою за допомогою опції showWeek. Значення за замовчуванням - "Нед" |
У деяких додатках важливо знати номер тижня на рік, на який припадає та чи інша дата. Наприклад, це потрібно у багатьох програмах бухгалтерського обліку. У віджеті Datepicker керування відображенням інформації про тижні здійснюється за допомогою опцій showWeek і weekHeader, як показано в прикладі нижче:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showWeek: true, weekHeader: "№ тижня" )); )) ;
Якщо параметр showWeek має значення true, то в календарі відображається стовпець з номерами тижнів. За промовчанням заголовком цього стовпця є "Нед", проте його можна змінити за допомогою опції weekHeader. У прикладі включено відображення стовпця тижнів, назва якого змінено на "№ тижня":
За промовчанням у календарі відображаються лише дати, що стосуються поточного місяця. Це означає, що в календарній сітці можуть бути порожні комірки. Можна дозволити заповнення порожніх осередків датами попереднього та наступного місяців, встановивши значення опції showOtherMonths рівним true, як показано в прикладі нижче:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOtherMonths: true )); ));
Результат представлений нижче. У цьому випадку дати, що стосуються інших місяців, стають доступними, якщо для опції selectOtherMonths встановлено значення true:
Налаштування значення true для опції showButtonBar призводить до додавання панелі додаткових кнопок, що знаходиться в нижній частині вікна віджета Datepicker. У разі спливаючого календаря панель містить дві кнопки: "Сьогодні" та "Закрити". Кнопка "Сьогодні" дозволяє повернутися до поточної дати, а кнопка "Закрити" призначена для закриття вікна календаря. Текст, який використовується для цих кнопок, можна змінити за допомогою опцій currentText та closeText.
Якщо для параметра goToCurrent встановити значення true, календар повертатиметься до вибраної дати, а не поточної. Цей засіб зручно використовувати, якщо віджет Datepicker налаштований з певним значенням опції defaultDate. Якщо мета вибору дати пов'язана з минулими чи майбутніми подіями, то повернення до поточної дати не завжди є доцільним. Відповідний приклад наведено нижче:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"])); $("#datep").datepicker(( showButtonPanel: true, currentText: "Перейти", gotoCurrent: true, defaultDate : "+1m +1y")).val("20.12.2014");
Зверніть увагу, що використання опції goToCurrent призводить до того, що натискання кнопки викликає перехід до вибраної дати. В даному прикладі такою обраною датою служить значення атрибуту value елемента input, але якщо користувач вибере іншу дату, а потім знову відкриє календар, то натискання кнопки повертатиме календар до дати, обраної користувачем, а не до вказаної вами.
Методи, що підтримуються віджетом Datepicker, наведено в таблиці нижче:
| datepicker("destroy") | Повністю видаляє функціональність віджету Datepicker з базового елемента |
| datepicker("disable") | Припиняє роботу віджету Datepicker для базового елемента |
| datepicker("enable") | Відновлює роботу раніше призупиненого віджету Datepicker для базового елемента |
| datepicker("option", опції) | Дозволяє отримати або встановити значення однієї або декількох опцій віджету Datepicker |
| datepicker("isDisabled") | Повертає true, якщо віджет Datepicker вимкнено |
| datepicker("hide") | Приховує календар, що спливає, якщо він видимий |
| datepicker("show") | Відображає календар, що випливає, якщо він невидимий |
| datepicker("refresh") | Оновлює календар для відображення виконаних у базовому елементі змін |
| datepicker("getDate") | Отримує дату, вибрану в календарі |
| datepicker("setDate", дата) | Встановлює вказане значення як обрану дату календаря |
Найчастіше я вдаюся до використання методів getDate та setDate у тих випадках, коли хочу надати користувачам можливість вибору цілих діапазонів дат за допомогою кількох віджетів Datepicker. У таких ситуаціях я волію не відображати вибрані дати в текстових полях і виводжу лише кількість днів між заданими граничними датами. Відповідний приклад наведено нижче:
jQuery UI label (margin:12px) input (width: 200px; text-align: left) #wrapper > * (float: left) #result (margin: auto; padding: 10px; width: 200px; clear: left) $( function() ( $("#result").hide(); $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#dateStart, #dateEnd").datepicker(( minDate: "-7d", maxDate: "+7d", onSelect: function(date, datepicker) ( if (datepicker.id == "dateStart") ( $("#dateEnd").datepicker("setDate", date) ). datepicker("enable").datepicker("option", "minDate", date) ) if (!$("#dateEnd").datepicker("isDisabled")) ( var startDate = $("#dateStart"). datepicker("getDate"); var endDate = $("#dateEnd").datepicker("getDate"); var diff = endDate.getDate() - startDate.getDate(); diff).parent().show(); ) )).filter("#dateEnd").datepicker("disable"); Початок: Кінець: Кількість днів:
У цьому прикладі створюються два календарі, один з яких відразу після завантаження документа перебуває у вимкненому стані. Для реагування на вибір дат користувачем використовується подія onSelect (про яку ми докладніше поговоримо далі).
Як тільки користувач вибирає дату в першому календарі, ми застосовуємо метод setDate для підготовки другого календаря, а метод getDate - для отримання дат з обох календарів та подальшого обчислення різниці в днях між першою та другою датами (для простоти передбачається, що обидві дати відносяться до одного і того місяця). Вид документа у вікні браузера представлений на малюнку:
Як і всі віджети jQuery UI, віджет Datepicker підтримує набір подій, що дають змогу отримувати повідомлення про важливі зміни в стані програми. Ці події наведені в таблиці нижче:
Я не буду повторно демонструвати, як працює метод onSelect, оскільки він уже використовувався в парі прикладів, включаючи той, який був розглянутий у попередньому розділі. Єдине, на що я хочу звернути вашу увагу, - це те, що аргументами, що передаються обробнику події, є строкові уявлення обраної дати та екземпляра Datepicker, який породив цю подію.
Подія onChangeMonth дозволяє реагувати на подію, яка відбувається при виборі користувачем іншого місяця або року, будь то за допомогою списків, що розкриваються, включених за допомогою опцій changeMonth і changeYear або кнопок перегортання місяців.
Використовуючи метод onClose, можна реагувати на закриття календаря. Ця подія запускається навіть у тому випадку, якщо користувач не вибрав дату в календарі. Аргументами обробника події є рядкове представлення дати (або порожній рядок, якщо користувач закрив вікно, не зробивши вибору) та екземпляр Datepicker, який породив цю подію.
Опис: З спливаючого вікна або календар календаря, щоб вибрати дату.
Нова версія: 1.0
JQuery UI дата підбирача (Datepicker) Виберіть дату, щоб додати висоту сторінки, щоб налаштувати плагін. Ви можете налаштувати формат дати та мову, обмежити обраний діапазон дат, додати кнопки та інші параметри навігації.
За замовчуванням, коли пов'язаний з ним текстове поле фокус, в невеликій накладеної відкритої вибору дати. Для календаря інлайн, просто виберіть дати додається до DIV або інтервалу.
взаємодія клавіатуриКоли дата вибирає відкритий, наступні команди клавіатури:
- PAGE UP: перехід до попереднього місяця.
- PAGE DOWN: Перехід до наступного місяця.
- CTRL + PAGE UP: Переміщення попереднього року.
- CTRL+PAGE DOWN: Перехід до наступного року.
- CTRL+HOME: Перемістити поточний місяць. Якщо вибрати дати закрито відкрито.
- CTRL + ЛІВИЙ: перейти на день.
- CTRL + ПРАВИЙ: перейти наступного дня.
- CTRL+UP: перехід до попереднього тижня.
- CTRL + DOWN: Перехід до наступного тижня.
- ENTER: Виберіть дату фокусування.
- CTRL + END: Закрити вибір дати та очистити дату.
- ПЕРЕМОГ: Дата закриття збирача, без будь-якого вибору.
Зміна стандартних параметрів для всіх вибору дати.
20.08.2012 Ромчик
Доброго вам дня. Нещодавно зіткнувся з проблемою - користувач в input повинен вказати дату в певному форматі. Не довго ламаючи голову, вирішив зробити так, щоб при натисканні на input з'являвся календар. Реалізувати це не складно, але навіщо? Якщо є чудовий віджет календаря на jQuery - datepicker. Далі мова піде про встановлення, налаштування та підключення datepicker.
Для початку я наведу наочний приклад того, що хочу зробити:
Ну, і зрозуміло, що після вибору дати календар зникає, а текстове поле з'являється обрана дата.
Приступимо до реалізації.
Заходимо на офіційний сайт jQueryUI. Щоб нічого зайвого не качати - тиснемо "Deselect all components"
І вибираємо "Core":
На цьому у принципі все. Але цей віджет має передвстановлені відображення (теми)
У правому верхньому куті Ви можете вибрати відповідну тему, вибрати версію віджету та натиснути “Download”:
На наступному етапі розпаковуємо архів.
Давайте відразу домовимося про структуру нашої сторінки:
Тепер файли jquery-1.8.0.min.js та jquery-ui-1.8.23.custom.min.js із завантаженого архіву поміщаємо в папку js. Тепер папку з назвою теми для datepicker (у моєму випадку це ui-lightness) з папки css завантаженого архіву поміщаємо в папку css для нашої сторінки. На цьому установка календаря – віджета jQuery Datepicker закінчена.
Давайте приступимо до підключення Datepicker. Як я вже казав, що я хочу викликати календар на кліку на текстовому полі. Додамо до нашого input id=”datepicker” для того, щоб ми могли легко до нього звернутися.
Тепер напишемо невеликий скрипт на jQuery, який викликатиме календар при кліку по даному тестовому полю:
$(function()( $("#datepicker").datepicker(); ));
Зберігаємо та перевіряємо.
Налаштування календаря – віджета на jQuery Datepicker.Перше, що налаштуємо цю тему для нашого календаря. Нижче я наведу таблицю з назвою теми для Datepicker та її відображення:
| UI lightness | |
| UI darkness | |
| Smoothness | |
| Start | |
| Redmond | |
| Sunny | |
| Overcast | |
| Le Frog | |
| Flick | |
| Pepper Grinder | |
| Eggplant | |
| Dark Hive | |
| Cupertino | |
| South Street | |
| Blitzer | |
| Humanity | |
| Hot Sneaks | |
| Excite Bike | |
| Vader | |
| Dot Luv | |
| Mint Chock | |
| Black Tea | |
| Trontastic | |
| Swanky Purse |
Як бачите достатньо, щоб вибрати відповідну, але якщо з яких-небудь причин Ви не знайшли таку тему, то Ви запросто можете змінити одну зі стандартних шляхом зміни файлу стилів для datepicker.
На цьому налаштування datepicker не закінчуються і під час виклику функції datepicker ми можемо передати додаткові параметри:
| Параметр | Опис | приклад |
| disable: true(false) Типово: false | Увімкнення або вимкнення datepicker | $(«.selector»).datepicker(( disabled: true )); |
| altField За замовчуванням: пусто | Вказується селектор елемента, який оновлюватиметься | $(«.selector»).datepicker(( altField: «#actualDate» )); |
| altFormat За замовчуванням: пусто | dateFormat — формат дати, який використовуватиметься для altField | $(".selector").datepicker(( altFormat: "yy-mm-dd")); |
| appendTex За замовчуванням: пусто | Текст, який буде відображено після кожного поля дати | $(«.selector»).datepicker(( appendText: «(yyyy-mm-dd)» )); |
| autoSize: true(false) Типово: false | Авторозмір елемента | $(«.selector»).datepicker(( autoSize: true )); |
| dateFormat: Типово: mm/dd/yy У таблиці нижче я наведу, які значення може приймати. | Вказує формат дати | $(".selector").datepicker(( dateFormat: "yy-mm-dd")); |
| dayNames За замовчуванням ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] | Повна назва днів тижня | $(".selector").datepicker(( dayNames: ["Понеділок", "Вівторок", "Середовище", "Четвер", "П'ятниця", "Субота", "Неділя"] ))); |
| dayNamesMin За замовчуванням: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"] | Скорочена назва днів тижня | $(".selector").datepicker(( dayNamesMin: ["Пн","Вт","Ср","Чт","Пт","Сб","Вс"] )); |
| dayNamesShort За замовчуванням: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] | Укорочена назва днів тижня | $(".selector").datepicker(( dayNamesShort: ["Пін", "Вто", "Срі", "Чет", "П'ят", "Суб", "Вос"] ))); |
| defaultDate За замовчуванням: пусто Як параметри використовує параметри dateFormat | Вказує дату за замовчуванням | $(«.selector»).datepicker(( defaultDate: +7 )); |
| monthNames За замовчуванням: [January, February, March, April, May, June, July, August, September, October, November, December] | Повна назва місяців | $(".selector").datepicker(( monthNames: ["Січень","Лютий","Березень","Квітень","Май","Червень","Липень","Серпень","Вересеньr", "Жовтень листопад грудень"] )); |
| monthNamesShort За замовчуванням [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec] | Скорочена назва місяців | $(«.selector»).datepicker(( monthNamesShort: [«Янв»,«Фев»,«Березень»,»Квітень»,»Май»,«Червень»,«Липень»,»Авг»,»Сен», "Окт", "Ноя", "Дек"] )); |
Тут я навів лише основні параметри, які можуть стати Вам у нагоді. Якщо Ви бажаєте побачити повний список параметрів, то вперед до офіційної документації
Тепер давайте зупинимося на значеннях, які приймає параметр dateFormat
Ось тепер усі.
Ми з Вами розглянули встановлення, підключення та налаштування одного із чудових віджетів jQuery – віджет календаря datepicker.
Сподіваюся, що стаття Вам сподобалася. Якщо у Вас виникли запитання, то пишіть у коментарях.
А на цьому я з Вами прощаюсь і вдалою web-розробкою.