Twórz minimalistyczne dane wejściowe Datetime za pomocą Flatpickr
Jednym z najtrudniejszych pól do tworzenia jest wybierz datę / godzinę. Programiści często korzystają z prostego menu wyboru miesiąca / dnia / roku lub polegają na różnych wtyczkach do wykonania zadania.
Wybierz pola działają dobrze, ale są trochę niezgrabne. Zamiast tego możesz ulepszyć swój formularz za pomocą Wtyczka Flatpickr. To jest darmowy open-source'owy selektor kalendarza JavaScript z zerowymi zależnościami.
To było zaprojektowany z myślą o minimalizmie, aby pasował do każdego układu strony, dowolnego formularza internetowego i powinien być użyteczny z dowolnego nowoczesnego urządzenia.
Jedną z zalet tej wtyczki jest różnorodność opcji niestandardowych. Możesz zmienić styl wyświetlania dat w polu tekstowym i miejscu rozpoczęcia kalendarza (domyślnie włączone) “dzisiaj”).
Ale możesz też używaj go jako selektora daty jeśli nie masz potrzeby wyboru czasu. Jest to jedynie opcjonalna funkcja, która pozwala przekazywać więcej danych za pomocą formularza z tym jednym selektorem.
Spójrz na Strona przykładów zobaczyć Flatpickra w akcji.
Możesz również ustaw opcje docelowe aby ograniczyć zachowanie selektora daty, takie jak:
- Odrzucanie określonych dat / zakresów
- Dopuszczalne tylko określone daty / zakresy
- Umożliwienie wyboru wielu dat
- “Tryb zakresu” aby wybrać datę początkową i końcową
- Po prostu zbieracz daty lub po prostu czas, albo obie daty i godziny razem
Opcje są praktycznie nieograniczone i wszystkie działają dzięki tej jednej waniliowej wtyczce JavaScript.
Użytkownicy mobilni często preferują natywny wybór daty, ale możesz zastąp to ustawieniem mobilnym w JavaScript. W ten sposób będziesz miał ten sam interfejs działający na wszystkich urządzeniach.
I możesz nawet dodaj wsparcie IE9 z wypełniaczem co sprawia, że jest to jedna z najlepiej obsługiwanych wtyczek wyboru daty.
Instalacja jest prosta polecenia dla npm, Bower i Yarn. Możesz też pobrać pliki źródłowe bezpośrednio z GitHub jeśli wolisz tę trasę.
Wszystko, co musisz wiedzieć, można znaleźć na stronie konfiguracji, która pokazuje jak dodać pliki do nagłówka & jak nazwać ten selektor dat na dowolnym polu. Łatwo jedna z wtyczek do wyboru najlepszych dat zaprojektowana na tyle, by pasowała do każdego projektu.
