Datepicker для чистого JavaScript

В этой статье мы рассмотрим основы работы с JavaScript Datepicker, для чистого JS, для тех кто не знает что это такое, это специальная библиотека для работы с календарями, благодаря ей вы сможете без усилий создать свйо календарь.

Мы будем конкретно смотреть на библиотеку  vanillajs-datepicker, её особенность в том, что она подойдёт для чистого JavaScript, тогда, как многие подобные требуют установку сторонних библиотек, например JQuery.

Также можете прочитать статью «Календарь на JavaScript», тоже очень полезная и интересная статья, особенно если вы сами хотите создать календарь.

Установка vanillajs-datepicker:

К сожалению для скачать эту библиотек можно только через NPM, что не всегда может быть удобно, вот как это делается:

После того как установили, подключайте его в свой JS файл, в котором будите использовать:

Но если вы используете WebPack или какой-нибудь JavaScript фреймворк, то тогда подключайте его так:

На этом подключение закончено.

Работа с vanillajs-datepicker:

Работать с этой библиотекой максимально просто, давайте всё разложим по пунктам:

1. Создаём блок div для вывода календаря:
   
   XHTML

   1	<div id="foo" data-date="01/15/2020"></div>

2. Импортируем vanillajs-datepicker одним из способов, который был показан выше.
3. Объявим объект класса Datepicker, тем самым создав календарь, в него передаём два параметра, первый элемент, второй объект параметров:
   
   JavaScript

   1 2 3 4

   const elem = document.getElementById('foo'); const datepicker = new Datepicker(elem, {   // ...настройки });

После того как вы всё это проделали, у вас должно появиться, что-то типа этого:

Также, если вы создаёте сайт где требуется выбирать две даты, например, начала чего-то, и конец чего-то, это полезно для сайтов по выбору билетов или созданию задач, чтобы это сделать, будем использовать ответвление библиотеки DateRangePicker, это не надо отдельно скачивать.

Вот инструкция по созданию этого:

1. 1. Первым делом также создадим шаблон где будет у нас календарь:
      
      XHTML

      1 2 3 4 5

      <div id="foo">   <input type="text" name="start">   <span>to</span>   <input type="text" name="end">   </div>

      
      Тут особенность в том, что теперь мы используем внутри блока, два текстовых инпута.
   2. Подключаем библиотеку, само подключение немного отличается, так как мы теперь должны подключить другой модуль, вот как это выглядит:
      
      JavaScript

      1 2 3 4 5

      // Если вы подключаете в скрипт: import DateRangePicker from 'path/to/node_modules/vanillajs-datepicker/js/DateRangePicker.js';   // Если подключаете в фреймворк: import { DateRangePicker } from 'vanillajs-datepicker';

   3. Также берём элемент и идентификатором  foo и создаём объекта класса DateRangePicker, тем самы создаём календарь:
      
      JavaScript

      1 2 3 4

      const elem = document.getElementById('foo'); const rangepicker = new DateRangePicker(elem, {   // ...Настройки });

Вот что у вас должно получиться:

Это основное что вам нужно знать про работу с этой библиотекой.

Вывод:

В этой статье вы прочитали как работать с JavaScript datepicker, используя специальную библиотеку vanillajs-datepicker, при этом вам больше не чего не надо скачивать стороннего. Если вам интересно библиотека, то рекомендую почитать документацию по ней.

Подписываетесь на соц-сети:

Оценка:

(Пока оценок нет)

Загрузка...

Поделится:

Пока кнопок поделиться нет