Начална » Уеб дизайн » Създаване на минималистичен входящ сигнал за време с помощта на Flatpickr

    Създаване на минималистичен входящ сигнал за време с помощта на Flatpickr

    Едно от най-трудните полета за създаване е изберете дата / час. Разработчиците често прибягват до лесни за избор менюта за месец / ден / година или разчитат на различни плъгини, за да свършат работата.

    Избраните полета работят добре, но те са малко тромави. Вместо това можете да джазнете формата си с Плъгин Flatpickr. Това е безплатен, отворен код за избиране на календар на JavaScript с нулеви зависимости.

    Беше проектиран с минимализъм, така че може да се побере във всяко оформление на уебсайт, във всяка уеб форма и да може да се използва от всяко съвременно устройство.

    Едно хубаво нещо за този плъгин е разнообразие от потребителски опции. Можете да препрофилирате как датите се появяват в текстовото поле и къде започва календарът (по подразбиране на “днес”).

    Но също така можете използвайте го като строго избирател за дата ако нямате нужда от избор на време. Това е просто допълнителна функция, която ви позволява да предавате повече данни чрез формуляра с този един избор.

    Разгледайте Страница с примери за да видите Flatpickr в действие.

    Можете също задайте целеви опции да ограничите поведението на избора на дата, като например:

    • Недопускане на определени дати / диапазони
    • Позволява само определени дати / диапазони
    • Разрешаване на избор на множество дати
    • “Режим на обхват” , за да изберете начална и крайна дата
    • Просто избор на дата, или просто време, или и двете дати и време заедно

    Опциите са практически безкрайни и всички те работят чрез този един ванилов JavaScript плъгин.

    Мобилните потребители често предпочитат родния инструмент за избор на дата, но можете замени това с настройка за мобилни устройства в JavaScript. По този начин ще имате същия интерфейс, работещ на всички устройства.

    И дори можете добавете IE9 поддръжка с polyfill което го прави един от най-добре поддържаните плъгини за избор на дата там.

    Инсталацията е проста команди за npm, Bower и Yarn. Или можете да изтеглите изходните файлове директно от GitHub ако предпочитате този маршрут.

    Всичко, което трябва да знаете, може да бъде намерено на страницата за настройка, която ви показва как да добавите файловете в заглавната си част & как да се обадите на този инструмент за избор на дата във всяко поле. Лесно е един от най-добрите плъгини за избор на дата, проектирани достатъчно просто, за да се поберат с всеки дизайн.