Гудъеар - интерактивный календарь, который связан с полем ввода.
Посмотреть можно здесь: http://timurarefev.ru/goodyear/
Гудъеар определяет введенную в разных форматах дату и приводит ее к заданному формату. При фокусе на поле ввода появляется календарь, в котором можно выбрать дату.
Гудъеар использует Джейквери и Моментджейэс.
Скачайте и загрузите к себе на сайт файлы.
Подключите jquery.
Добавьте внутрь тэга <head> следующие строки:
<script src="/путь/к/goodyear.js"></script>
<link rel="stylesheet" href="/путь/к/goodyear.css">
Теперь, чтобы использовать Гудъеар, нужно просто добавить к полю ввода class="goodyear":
<input name="date" class="goodyear">
data-goodyear-language='en'
Можно задать язык для выбранного поля. В данный момент доступно два языка - английский и русский ("en" и "ru").
data-goodyear-visible-format="YYYY-MM-DD"
Задает формат даты, к которому будут приведены данные в поле ввода, которое видит пользователь.
YY, YYYY - год, две или четыре цифры,
M, MM, MMM, MMMM - месяц, первый вариант - числа от 1 до 12, второй - всегда две цифры, от 01 до 12, третий вариант - месяц прописью сокращенно, четвертый - месяц прописью целиком,
D, DD - дата аналогично месяцу.
HH - часы, от 00 до 24
mm - минуты, от 00 до 60
По умолчанию используется D MMM YYYY г.
data-goodyear-format="YYYY-MM-DD"
Задает формат даты, к которой будут приведены данные в поле, которое пользователь не видит, но которое будет отправлено вместе с формой.
Значения такие же, как у предыдущей настройки, по умолчанию используется YYYY-MM-DD.
data-goodyear-min-year="2000"
data-goodyear-max-year="2020"
Задают минимальный и максимальный годы
По умолчанию используется +50 лет от введенной даты для максимального года и -50 лет для минимального.
data-goodyear-hour-picker="true"
Включает возможность выбора часа.
data-goodyear-minute-picker="true"
Включает возможность выбора минуты.
data-goodyear-minutes-step='5'
Шаг, с которым выводятся минуты.
data-goodyear-range-from='1' data-goodyear-range-to='1'
Если требуется сделать возможность выбора диапазона дат, можно установить на странице два инпута, подключить к ним Гудъеар и связать их с помощью этой настройки. В качестве значения указывается ID связки.
При разработке использовались Джейквери версии 1.11.0 и библиотеки moment.js, jquery_mousewheel. Если библиотеки не были подключены ранее, то они будут подгружены автоматически при подключении Гудъеара, важно только оставить их в одной папке с Гудъеаром. Можно использовать Джейквери любой версии старше 1.2.2.
На тач устройствах всплывающий календарь для удобства ввода будет отключен, но форматирование даты будет работать.
Большое спасибо Илье Бирману, который руководил процессом разработки и нарисовал дизайн и Артему Горбунову, которому принадлежит идея календаря.