Vytvořit Minimalist Datetime Input Select pomocí Flatpickr
Jedním z nejnáročnějších polí, která je třeba vytvořit, je vyberte datum / čas. Vývojáři se často uchylují k jednoduchým nabídkám menu pro měsíc / den / rok nebo se spoléhají na různé pluginy, aby tuto práci provedli.
Výběr polí funguje dobře, ale jsou trochu neohrabaný. Místo toho můžete svůj formulář jazzovat Flatpickr plugin. To je volný, open-source JavaScript kalendář s nulovými závislostmi.
to bylo navržený s minimalismem v mysli, tak to může zapadat do jakékoliv webové stránky rozložení, jakýkoli webový formulář, a měl by být použitelný z jakéhokoli moderního zařízení.
Jedna pěkná věc o tomto pluginu je různých možností. Můžete přepsat, jak se data zobrazují v textovém poli a kde se kalendář spouští (výchozí nastavení je zapnuto) “dnes”).
Ale můžete také používat jej jako přísně data picker pokud nepotřebujete výběr času. Je to pouze volitelná funkce, která umožňuje předávat více dat prostřednictvím formuláře s tímto jedním výběrem.
Podívejte se na Stránka Příklady vidět Flatpickr v akci.
Můžete také nastavit cílené možnosti omezit chování pro výběr data, například:
- Nepovolení určitých dat / rozsahů
- Povolení pouze určitých dat / rozsahů
- Povolení více výběrů data
- “Režim rozsahu” vyberte datum začátku a konce
- Stačí vybrat datum, nebo jen čas, nebo obojí datum a čas společně
Možnosti jsou prakticky nekonečné a všechny fungují prostřednictvím tohoto vanilla JavaScript plugin.
Mobilní uživatelé často preferují nativní výběr data, ale můžete přepsání pomocí nastavení mobilu v jazyce JavaScript. Tímto způsobem budete mít ve všech zařízeních stejné rozhraní.
A můžete dokonce přidat podporu IE9 s polyfill což z něj dělá jeden z nejvíce podporovaných pluginů pro výběr dat.
Instalace je jednoduchá příkazy pro npm, Bower a Yarn. Nebo můžete stáhnout zdrojové soubory přímo z GitHubu pokud dáváte přednost této trase.
Vše, co potřebujete vědět, naleznete na stránce nastavení, která vám ukáže jak přidat soubory do záhlaví & jak volat tento výběr data na libovolném poli. Snadno jeden z nejlepších pluginů pro výběr dat navržených tak jednoduše, aby se vešly do jakéhokoliv designu.
