Практика: datepicker

Мета

Закріпити отримані знання по JS.

Навчитися складати план виконання складних задач.

Навчитися створювати плагіни, бібліотеки функцій.

Технічне завдання

Створити плагін datepicker: при кліку в поле форми введення дати має з'явитися календарик для зручного вибору дати.

Подібних плагінів є багато, наприклад, jQueryUI datepicker.

Проте, ви не завжди будете знаходити те, що потрібно, що вам підходить на всі 100%, не буде можливості переналаштувати, доробити існуючий плагін. В такому випадку доведеться писати свій плагін.

Детально:

Тут по пунктам розбиті та описані всі тонкощі роботи плагіна. Зараз вчитуватися у це все та обдумувати конкретно кожен пункт немає сенсу - тільки голову заб'ємо зайвими деталями.

Ми маємо глобальну ціль - почати роботу. А вже по мірі просування потрібно буде звірятися з цими пунктами.

Після завершення роботи потрібно ще раз пройтися по всіх пунктах і перевірити чи все реалізовано і чи все вірно працює.

  • На сторінці є поле вводу дати (може бути декілька полів, можуть бути кнопки).
  • При отриманні фокуса полем ввода чи кліку по кнопці потрібно відобразити календарик.
  • Календарик повинен розміщуватися під полем вводу чи кнопкою.
  • Передбачити, що якщо кнопка чи поле вводу знаходяться близько до правого краю екрана і календарик не влізе, то його вертикально вирівняти по правому краю активного елемента.
  • Календарик повинен створюватися і розміщуватися динамічно, належати тегу body щоб не ламати внутрішню структуру html-кода.
  • Повинна бути можливість вказати до яких полів чи кнопок підв'язати календарик.
  • При кліку на дату календарика - він повинен закритися (і видалитися) і дата повинна з'явитися у полі ввода.
  • Якщо ж календарик підв'язаний до кнопки - дата повинна з'явитися як текст підв'язаного за допомогою атрибута data-for елемента.
  • При кліку поза межами календарика він повинен просто закритися (і видалитися).
  • У календарика повинні бути кнопки переключення місяців та років.
  • При кліку на дні з попереднього чи наступного місяця календарик повинен переключитися на відповідний місяць.
  • При відкритті календарика перевіряти яка дата встановлена в полі вводу чи підв'язаному тезі і цю дату відображати в календарику.

План виконання

Створіть план виконання завдання, грубий алгоритм.

Опишіть як повинен працювати плагін.

Плагіни та бібліотеки функцій

Плагіни і бібліотеки функцій розповсюджуються у вигляді окремих файлів. Тому в першу чергу створіть окремий js-файл.

Спочатку підключаються бібліотеки функцій, потім - плагіни, в кінці - користувацькі файли скриптів:

<script src="js/lib/superlib.min.js"></script>
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/mootools.min.js"></script>
<script src="js/lib/bootstrap.min.js"></script>
<script src="js/plugin/maskedit.min.js"></script>
<script src="js/plugin/nouislider.min.js"></script>
<script src="js/plugin/jquery.cycle2.min.js"></script>
<script src="js/my-plugin.js"></script>
<script src="js/script.js"></script>   

Придумайте назву плагіна, бажано таку, щоб не перетиналася з існуючими в мережі, популярними.

Вгорі пропишіть коментар з копірайтом, контактами автора, короткий опис плагіна.

/* pbDatepicker plugin, (c) Poshtar Boba, 2017
 * http://circle.com.ua/users/boba/pbdatepicker.html
 * poshtar.boba@gmail.com, skype: hm051082baa
 * fine simple datepicker plugin
*/

Плагін - це як правило, одна функція (або декілька), яка приймає в себе деякі аргументи.

В нашому випадку у якості аргумента можна задати селектор елементів, до яких підв'язується плагін.

Якщо потрібні додаткові налаштування - їх найкраще передавати другим аргументом, у вигляді об'єкта:

my-plugin.js
function myPlugin(selector, options){
  ...
}

script.js
var opt = {
  size: 17,
  color: 'green',
  title: 'Двигун тепловоза',
  time: '40s'
}
myPlugin('#TEP70', opt);

Наш плагін буде відображати блок з календариком, який повинен мати деяке оформлення. Створіть css-файл з таким же іменем і все, що стосується календарика - прописуйте туди.

Бібліотека функцій - це js-файл з набором функцій, що виконують певну задачу, полегшують виконання типових задач.

Приклади бібліотек функцій - Math (вбудована в базовий JS), Prototype, MooTools, jQuery і т.д.

Часто бібліотеки мають певну тематику: анімація, робота з SVG-форматом, обробка масивів даних, обмін даними з сервером...

Можна просто накидати в файл купу функцій:

function random(){ ... }
function min(){ ... }
function max(){ ... }
function sin(angle){ ... }
function cos(angle){ ... }
...

Але бібліотеку краще оформити у вигляді об'єкта з набором методів, як це зроблено у більшості популярних бібліотек.

Це дозволяє уникнути конфліктів з іншими бібліотеками і користувацькими функціями.

var Math = {
  random: __mathRandom,
  min: __mathMin,
  max: __mathMax,
  sin: __mathSin,
  cos: __mathCos,
  ...
}
function __mathRandom(){ ... }
function __mathMin(){ ... }
function __mathMax(){ ... }
function __mathSin(angle){ ... }
function __mathCos(angle){ ... }
...

Перші кроки

Наша поточна задача складається з двох великих блоків:

  1. Реагувати на дії користувача - відобразити блок, сховати блок, записати дату в поле вводу чи тег.
  2. Створити динамічно календарик і кнопки керування ним.

Ці дві задачі можна вирішувати незалежно одна від одної. Пропоную почати з другої.

На початку вирішення задачі її бажано спростити:
- якщо потрібно відсортувати мільйон елементів - спочатку зробимо сортування 5-10 елементів;
- якщо стоїть задача створити 30 блоків з товарами на сторінці інтернет-магазина - спочатку створюємо один;
- якщо нам задано зробити автомобіль - спочатку зробимо тарантас, головна задача - аби їхав, а марафєт накладати можна згодом.

Отже, нам потрібно створити табличку-календарик на місяць. Як цю задачу можна спростити?

Домашнє завдання

  1. Добавте в кінець сторінки блок div#test з текстом "Тест". В шапці файла пропишіть стилі для цього блока, задайте:
    абсолютне позиціонування;
    z-index: 8880; (не повинен перекривати #overlay вспливаючих вікон - 8990)
    паддінги;
    бекграунд;
    бордер.
  2. Закоментуйте цей блок і створіть js-скрипт, який буде створювати цей блок при отриманні фокуса полем ввода чи кліком по кнопці і відображати його під відповідним елементом.
  3. При кліку за межами календарика чи натискання клавіші Esc блок повинен зникати.
  4. При кліку на сам блок в поле вводу чи зв'язаний з кнопкою тег повинно прописатися слово "Тест".
  5. Не забудьте повидаляти стилі і цей тестовий блок коли буде готовий календарик.