Відразу обмовлюся, цикл цих статей не розрахований на досвідчених профі, вона є всього лише поштовхом до розвитку, таким собі невеликим екскурсом по можливостям для новачків, для тих хто не має поняття про UI і jQuery в цілому.
Ну їдьмо!
Отже, приготування закінчені.
Щоб створити календар потрібна всього лише один рядок html:
Або якщо Ви плануєте включити календар в сайт як елемент сторінки:
І пара рядків js:
І так ми отримали цілком працює календар російською, але раптом ми робимо сайт англійською або українською? Щоб змінити ситуацію на нашу користь треба всього лише змінити один параметр, причому робити це можна динамічно:
Стандартного функціоналу «за замовчуванням» не завжди вистачає на виконання тих чи інших завдань. Тому трохи подредактіруем настройки:
У лістингу вище у нас вийшло цілих три опції, в яких є коллбекі.
beforeShow - це та функція, яка буде викликана перш ніж можна буде календаря.
За допомогою css-опцій вона встановить інпут жовтий фон.
У onSelect визначена функція, яка буде викликана при виборі будь-якої дати, вона виведе обрану дату в alert і передасть пусте значення css-опції, що поверне інпут колишній вигляд.
onClose функція яка спрацює при закритті календаря - т.е.вернет інпут білий фон.
У наведеному прикладі я демонструю роботу методу dialog. Ми викликаємо цей метод при натисканні на посилання. Перший аргумент - це назва методу, другий аргумент textDate - дата на якій за замовчуванням буде відкриватися календар. В аргументі onSelect можна передати callback-функцію, яка буде викликана при виборі конкретної дати в календарі. В аргументі settings можна передати об'єкт з новими налаштуваннями віджета, які будуть застосовані до календаря, який буде відкритий в діалоговому вікні.
Ну ось начебто і все ... Користуйтеся! А далі наведено список всіх опцій, методів і подій.
- beforeShow - тут можна визначити функцію, яка буде викликатися перед відкриттям календаря. Функція приймає в якості аргументу об'єкт, що характеризує текстове поле введення з яким працює віджет.
- beforeShowDay - в цій опції можна визначити для користувача функцію, яка буде приймати в якості аргументу обрану дату. Функція повинна повернути масив, де елемент з індексом [0] - true або false показує, можливий чи ні вибір цієї дати. Елемент з індексом [1] містить ім'я класу (класів) для відображення дати. Елемент з індексом [2] (опціонально) - текст підказки для дати. Функція буде викликатися для кожної дати в календарі в момент наведення покажчика миші.
- onChangeMonthYear - тут можна визначити функцію, яка буде викликатися при зміні місяця або року в календарі. Функція приймає три аргументи. Перші два аргументи - це нові значення року і місяця, третій аргумент - об'єкт datepicker.
- onClose - в цій опції визначається функція, яка буде викликана, коли календар був закритий без вибору будь-якої дати.
- onSelect - в цій опції визначається функція, яка буде викликана, коли в календарі обрана будь-яка дата.
- destroy - .datepicker ( 'destroy') повністю видаляє всю функціональність віджета Datepicker. Для отримання елементів в стан, що передує ініціалізації.
- disable - .datepicker ( 'disable') тимчасово забороняє використання всієї функціональності віджета. Знову дозволити її використання можна за допомогою методу enable.
- enable - .datepicker ( 'enable') дозволяє використання всієї функціональності віджета, якщо раніше вона була заборонена з використанням методу disable.
- option - .datepicker ( 'option', optionName, [value]) за допомогою цього методу можна отримати або встановити значення будь-опції віджета після ініціалізації.
- dialog - .datepicker ( 'dialog', dateText, [onSelect], [settings], [pos]) відкриває віджет Datepicker в режимі діалогового вікна. В аргументі dateText передається дата, на якій повинен бути відкритий календар. Інші аргументи необов'язкові. В аргументі onSelect можна передати функцію, яка буде викликана в момент вибору дати в календарі, в аргументі settings можна передати об'єкт з новими налаштуваннями віджета, в аргументі pos - координати, в яких буде відкрито діалогове вікно. Тут можна використовувати події миші, щоб визначити координати.
- isDisabled - .datepicker ( 'isDisabled') метод повертає значення true, якщо до віджету був застосований метод disable і false в іншому випадку.
- hide - .datepicker ( 'hide', [speed]) приховує раніше відкритий календар.
- show - .datepicker ( 'show') відкриває календар.
- getDate - .datepicker ( 'getDate') метод повертає дату, обрану в календарі.
- setDate - .datepicker ( 'setDate', date) метод дозволяє встановити дату в календарі. Значним аргументу date може бути рядок (наприклад: 25.10.1917)
Всім привіт! Підкажіть, в чому проблема, будь ласка. Підключаю у себе все за інструкцією, працює все нормально, навіть в шостому віслюку. Після того, як починаю змінювати налаштування, наприклад додаю $ ( "# datepicker"). Datepicker ();>); - працює скрізь, крім осла, причому будь-якого! При натисканні в поле просто нічого не відбувається. Переходив на Ваш сайт - все нормально, пробував додавати настройки в скачаний приклад - знову пропадає в віслюку.
Вітання. Дуже корисна інформація, але на жаль я так і не зрозуміла, у мене дата виводиться в форматі mm.dd.yyyy, як мені її поміняти на dd.mm.yyyy. І ще після вибору дати мені потрібно дізнатися день тижня, як це зробити?