Select menu’s zijn een veelgebruikte keuze voor datumkiezers, omdat ze eenvoudig zijn in te stellen. Maar na tientallen jaren MM/DD/YY-menu’s te hebben gebruikt, denk ik dat onze gebruikers beter verdienen.
Het is vrij eenvoudig om een datumkiezer aan je formulier toe te voegen, en de meeste datumkiezer-plugins zijn helemaal gratis. Als je eenmaal de basis hebt geleerd, ga je nooit meer terug, dus het is gewoon een kwestie van een goede plugin vinden. Ik heb het web afgestruind op zoek naar de beste plugins en ze allemaal in deze post ondergebracht.
Je vindt vanilla JS plugins, jQuery plugins, en zelfs extensies voor frameworks zoals Bootstrap. Het maakt niet uit wat je nodig hebt er is zeker een plugin hier voor u.
Flatpickr
De lichtgewicht Flatpickr plugin is eenvoudig in gebruik en nog eenvoudiger in te stellen. Hij is ontworpen met eenvoud in het achterhoofd, dus de standaard UI zou in elke lay-out moeten passen.
Als je een kijkje neemt op de voorbeeldenpagina, zul je zien dat deze datepicker niet erg complex is. Maar dat is vaak wat gebruikers willen: een eenvoudige interface om gegevens in te voeren en verder te gaan.
Met Flatpickr kunt u de begindatum, de maand en het jaar aanpassen, samen met beperkingen op welke datum (s) kunnen worden gekozen. Bovendien kunt u een optionele tijdparameter toevoegen met behulp van de 12H- of 24H-klok.
Het lijdt geen twijfel dat dit een van de betere datumkiezer-plugins is, alleen al vanwege het ontwerp, de gebruikersinterface en de functies.
Pickadate.js
Een andere keuze die ik echt leuk vind, is de Pickadate.js plugin. Deze is mobiel-vriendelijk en volledig responsive, dus het is een geweldige oplossing voor alle apparaten.
Pickadate draait op jQuery, dus je hebt die bibliotheek wel nodig als afhankelijkheid. Dit bestand is echter vrij licht, en er is niet veel voor nodig om het werkend te krijgen, dus zelfs met jQuery zou je geen vertragingen in de pagina moeten merken.
Dit biedt zowel een datum- als een tijdselectiemenu, dus het is een volledig uitgeruste optie, ongeacht welke gegevens je verzamelt.
Datum Range Picker
Kiezers voor invoerbereiken zijn heel gebruikelijk bij planningsprogramma’s en visuele gegevenstoepassingen. Google Analytics gebruikt bijvoorbeeld zijn eigen datumbereikkiezer voor bezoekersgegevens over een specifieke website.
Om dit effect na te bootsen, kunt u de datumbereikkiezer proberen. Het is ontworpen om te passen in Bootstrap CSS stylesheet, maar kan ook solo worden gebruikt.
Plus het ondersteunt multi-maand pickers, enkele maand pickers, en vooraf gedefinieerde waarden voor gemeenschappelijke datum ranges (verleden week, verleden maand, enz.).
Veruit de meest goed ontworpen JS bereik selectie plugin die ik ooit heb gezien.
Datepair.js
Om iets eenvoudigers te gebruiken voor bereik selectie probeer Datepair.js.
Deze is gebaseerd op dubbele invoervelden voor het selecteren van de begindatum & einddatum van een bereik. Het kan ook tijd bereiken ook op basis van uw instellingen en hoe u de plugin.
Is dit beter dan een enkele datumkiezer UI? Dat is aan u (of uw klant) om te beslissen.
Maar dit is een eenvoudige plugin om in te stellen en uw bezoekers kunnen de voorkeur geven aan de enkele veld inputs.
DateTimePicker
Hier is een van de meer unieke plugins die er zijn met nogal een abnormale interface.
De plugin DateTimePicker heeft een eigen vervolgkeuzemenu waarmee de gebruiker de datum en tijd kan selecteren met plus- & min-pictogrammen.
Aan de ene kant is dit gemakkelijker om rond te springen en snel de maand/het jaar te wijzigen met een paar tikjes. Maar het is ook niet de typische kalender UI dus het kan enige aanpassing van gebruikers die niet bekend zijn met deze interface.
Er zijn voors & tegens aan alles, dus ik zeg neem een kijkje op de plugin en zien wat je denkt. Deze ondersteunt afzonderlijke datum &tijd invoer, maar je kunt ze ook combineren waardoor datetime selectie slechts een klik verwijderd is.
glDatePicker
Voor een gedetailleerd ontwerp en tonnen optionele functies bekijk je de glDatePicker plugin. Hij is vrij licht als je bedenkt hoeveel je krijgt en hij meet ongeveer 7 KB als hij is geminificeerd.
Deze draait bovenop jQuery, dus daar moet je ook rekening mee houden. Maar het is een van de weinige plugins die prachtige thema’s biedt voor kalender datum selectie schermen.
Het heeft een paar voorontworpen sjablonen, maar het komt ook met CSS-eigenschappen die je zelf kunt restylen. Niet te vergeten alle JS functies hebben callbacks, dus als je comfortabel bent met codering kunt u uw eigen functies toe te voegen in de mix.
Wickedpicker
Hoewel dit is technisch niet een datepicker het is een van de betere tijd pickers die er zijn.
Wickedpicker is een jQuery-aangedreven tijd selectie plugin die werkt op elk invoerveld. Het ondersteunt de gebruiker input voor uren / minuten en de AM / PM-instelling. U kunt ook draaien op een 24-uurs klok met een eenvoudige JS optie.
Sommige datepicker plugins hebben tijdselectie, maar het komt als een extra functie. Deze plugin is alleen ontworpen voor tijdsinvoer, dus het is een goede keuze als dat alles is wat je nodig hebt.
Bootstrap Datepicker
Iedereen die bekend is met Bootstrap weet hoe nuttig het is voor nieuwe projecten. Als je vaak sites ontwerpt op Bootstrap, moet je deze Bootstrap Datepicker bewaren.
Het is een van de weinige plugins die speciaal voor BS3 lay-outs zijn gemaakt, en hij zou ook compatibel moeten zijn met de aankomende Bootstrap 4 release.
Het ontwerp bevat een sectie voor het wijzigen van de maand & jaar, samen met een tijdkiezer voor het wijzigen van minuten/uren in je datumkiezer. Het past perfect in de BS GUI, dus het is zonder twijfel een hoofdbestanddeel voor iedereen die Bootstrap gebruikt.
Foundation Datepicker
Een ander populair frontend framework is Foundation en als je meer van die bibliotheek houdt, moet je deze Foundation datepicker bekijken die ook 100% gratis is.
Het komt ook met een tijdkiezer en opties om de tijd op te nemen in het datumselectiescherm. U kunt zelfs definiëren data op basis van vaste instellingen (dat wil zeggen alleen bepaalde data beschikbaar zijn) en beperken die data tot bepaalde tijden.
U kunt zelfs restyle de tijd input met vaste keuzes, zoals 15-minuten intervallen.
Er is veel dat je kunt doen met deze plugin, dus het is een geweldige aanvulling op elke Foundation website.
FoxRunSoftware DatePicker
Dit is een van de top plugins op GitHub voor jQuery datepickers. Het is gewoon getiteld “DatePicker”, maar om het te onderscheiden van de rest is het de plugin ontworpen door FoxRunSoftware.
Het wordt geleverd met een schone interface, en standaard gebruikt het een GUI-venster van 3 maanden voor datumselectie. Dit voelt net als de Google Analytics picker, behalve dat het een beetje kleiner is.
De callbacks zijn vrij eenvoudig te coderen, en je hebt veel controle over hoe je de UX kunt beheren. Zeker een datepicker die de moeite waard is om te bewaren als je de Analytics GUI wilt repliceren.
jQ Datepicker
Hier is nog een datepicker plugin met de eenvoudige titel Datepicker. Ook deze draait op jQuery, maar deze is ontworpen door een Chinese ontwikkelaar, Fengyuan Chen.
Deze Datepicker-plugin is fenomenaal en heeft een ton aan documentatie voor nieuwere JS-ontwikkelaars.
De belangrijkste demo-pagina is geweldig om mee te spelen, maar bekijk de GitHub repo als je deze plugin wilt installeren & op je website.
En als je ooit op zoek bent naar meer datepicker plugins probeer dan te zoeken op GitHub. Webontwikkelaars brengen voortdurend nieuwe plugins uit, dus je weet nooit wat je zult vinden.