Aangepaste tijdinvoervelden met jQuery Timedropper

Sommige webformulieren vereisen datumgebaseerde invoer en datumselectieplug-ins kunnen daarbij helpen. Maar hoe zit het met de invoer van de tijd ?

Met de gratis jQuery-plug-in Timedropper kunt u aangepaste tijdkiezers toevoegen voor het instellen van afspraken, het plannen van telefoongesprekken of vrijwel alles wat u nodig hebt.

Het is ongelooflijk eenvoudig en je hebt alleen de jQuery-bibliotheek nodig om te beginnen. Nadat u die bibliotheek hebt geïnstalleerd, kunt u de Timedropper JS / CSS-bestanden toevoegen en deze laten uitvoeren. Dat is het!

Elk invoerveld moet worden getarget door een jQuery-selector die vervolgens het invoervak ​​Timedropper toevoegt. Dit heeft opties die u kunt toevoegen met extra (optionele) functies:

• Autoswitch - past automatisch uur / minuut aan bij het mousen
• Meridianen - stel een 12-uursklok in in plaats van een 24-uursklok
• Formaat - bepaalt hoe de uren en minuten verschijnen (standaardstijl is 1:22 uur)
• Muiswiel - maakt tijdswisseling mogelijk op basis van wielschuiven
• Init_animation - schakelt de vervagende animatie-effecten in
• setCurrentTime - voegt automatisch de huidige tijd aan de veldwaarde toe

Als je nog meer durft, kun je de stijl veranderen met een paar voorverpakte thema's, of zelfs helemaal zelf je eigen stijl opbouwen.

In een zee van jQuery-plug-ins zit Timedropper op de knieën van de bij. Het biedt echt een unieke interface voor elke app om een ​​tijdstip te selecteren, ongeacht het apparaat.

Uiteraard is het mobiel-responsief, dus het werkt ook op smartphones en tablets. Ik hou echter niet van het ontbreken van ondersteuning voor numpads . Dat lijkt de voor de hand liggende manier om een ​​tijd in te voeren, dus zonder die functie kan het beperkend aanvoelen.

Toch, voor een unieke interface en een eenvoudige installatie, raad ik Timedropper aan voor iedereen die bereid is om het te proberen.

Je kunt alle broncode gratis vinden op GitHub en je zult een ongelooflijk eenvoudige demo vinden in deze pen, die hieronder is ingesloten.

Als je nog andere gedachten of suggesties hebt, kun je deze met de ontwikkelaar delen op Twitter @felice_gattuso.