Maak minimalistische Datetime Input Select met Flatpickr
Een van de lastigste velden om te maken is de datum / tijd selecteren. Ontwikkelaars maken vaak gebruik van eenvoudige keuzemenu's voor de maand / dag / jaar of vertrouwen op verschillende plug-ins om het werk te doen.
Selecteer velden werken prima, maar ze zijn een beetje onhandig. In plaats daarvan kun je je formulier jazzen met de Flatpickr plugin. Het is een gratis, open-source JavaScript-kalenderkiezer met nul afhankelijkheden.
Het was ontworpen met minimalisme in gedachten, dus het kan in elke websitelay-out, elke webvorm passen en moet bruikbaar zijn vanaf elk modern apparaat.
Een aardig ding over deze plug-in is de verschillende aangepaste opties. U kunt restylen hoe de datums in het tekstveld verschijnen en waar de kalender start (standaard ingeschakeld “vandaag”).
Maar u kunt ook gebruik het als strikt een datumkiezer als u de tijdselectie niet nodig hebt. Het is slechts een optionele functie waarmee u met deze ene kiezer meer gegevens door het formulier kunt sturen.
Kijk eens naar de Voorbeeldpagina om Flatpickr in actie te zien.
Je kan ook stel gerichte opties in om het gedrag van de datumkiezer te beperken, zoals:
- Niet toestaan van bepaalde datums / bereiken
- Alleen bepaalde datums / bereiken toestaan
- Meerdere datumselecties toestaan
- “Bereik modus” om een begin- en einddatum te selecteren
- Alleen een datumkiezer, of alleen tijd, of beide datum en tijd samen
De opties zijn vrijwel eindeloos en ze werken allemaal via deze ene vanille JavaScript-plug-in.
Mobiele gebruikers geven vaak de voorkeur aan de native datumkiezer, maar dat kan overschrijf dit met een mobiele instelling in JavaScript. Op deze manier heb je dezelfde interface die werkt op alle apparaten.
En je kunt zelfs voeg IE9-ondersteuning toe met een polyfill waardoor dit een van de best ondersteunde datumkiezerplug-ins is die er zijn.
Installatie is eenvoudig met opdrachten voor npm, prieel en garen. Of u kunt de bronbestanden downloaden rechtstreeks van GitHub als je die route verkiest.
Alles wat u moet weten, kunt u vinden op de instellingenpagina die u toont hoe je de bestanden aan je header toevoegt & hoe u deze datumkiezer op elk veld kunt aanroepen. Gemakkelijk een van de beste datumpick-upplug-ins die eenvoudig genoeg is ontworpen voor elk ontwerp.
