Хотите улучшить свои формы без лишних усилий? Встречайте DeskyCalendar, минималистичный и отзывчивый инструмент выбора дат, созданный на чистом JavaScript. Он создан для того, чтобы добавить стиль и функциональность в процесс выбора даты, не утяжеляя при этом ваш проект.

Страница демо и проекта

демо-страница -> https://danruggi.github.io/datepicker/
ссылка на проект -> https://github.com/danruggi/datepicker

Ключевые особенности

? Полная адаптация: отлично смотрится на любом устройстве — никаких сплющенных календарей.
? Двойной/одиночный формат: с легкостью выбирайте между выбором одной даты или диапазона.
? Добавьте опцию «Любая дата». Позвольте пользователям выбирать любую дату, что идеально подходит для фильтров и отчетов.
? Отключить даты: запретить выбор прошлых или будущих дат, сохраняя все под контролем.
? Выполнение внешней функции по клику: Хотите запускать специальное действие при выборе даты? Легко!
Быстрая настройка

1. Включите CSS и JS

Просто добавьте эти ссылки в свой HTML-код:

2. Добавьте свой вклад

Создайте поле ввода:

3. Инициализируйте календарь

Настройте это с помощью простой строки JavaScript:

новый DeskyCalendar({'myID': {}});

Минимальные примеры

Две колонки

Легко переключиться на двойной выбор даты:

new DeskyCalendar({'calendar_date_selector1': {mode: "double"}});

Отключить даты

Хотите ограничить даты? Просто добавьте

const d = новая дата();
новый DeskyCalendar({'calendar_date_selector2': {disableBefore: d}});
Заключение

С помощью всего лишь пары строк DeskyCalendar привносит изысканность и простоту в выбор даты, оставаясь при этом легким и эффективным. Пришло время улучшить ваши формы с помощью этого элегантного решения. Приятного кодирования!