Tilpassede tidsinngangsfelt med jQuery Timedropper

Enkelte webskjemaer krever datobaserte innspill og datautvalgsprosjekter kan hjelpe med det. Men hva med tidsinnganger ?

Med den gratis jQuery-plugin- timetroppen kan du legge til tilpassede tidsplukkere for å angi avtaler, planlegge telefonsamtaler eller stort sett alt du trenger.

Det er utrolig enkelt, og du trenger bare jQuery-biblioteket for å komme i gang. Når du har installert det biblioteket, kan du legge til Timedropper JS / CSS-filene og la det løpe. Det er det!

Hvert inntastingsfelt må målrettes av en jQuery-velger som deretter legger til Timedropper-inputfeltet. Dette har muligheter du kan legge til med ekstra (valgfrie) funksjoner:

• Autoswitch - endres automatisk time / minutt når du mousserer opp
• Meridians - sett en 12-timers klokke i stedet for en 24-timers klokke
• Format - angir hvordan timene og minuttene vises (standard stil er 1:22 pm)
• Mousewheel - muliggjør tidsendring basert på hjulrulle
• Init_animation - slår på fading animasjonseffekter
• setCurrentTime - legger automatisk til gjeldende tid til feltverdien

Hvis du er enda mer dristig, kan du endre stilen ved å bruke noen forhåndsdefinerte temaer, eller til og med bygge din egen fra grunnen av.

I et hav av jQuery-plugins er Timedropper bien knær. Det tilbyr virkelig et unikt grensesnitt for enhver app for å velge en tid uansett enhet.

Det er selvsagt mobil-responsivt, så det fungerer også på smarttelefoner og tabletter. Men jeg liker ikke mangelen på num pad støtte . Det virker som den åpenbare måten å gå inn på en tid, så uten at den funksjonen kan det føles begrensende.

Likevel, for et unikt grensesnitt og et enkelt oppsett, anbefaler jeg Timedropper for alle som er villige til å gi det et skudd.

Du finner all kildekoden gratis på GitHub, og du finner en utrolig enkel demo i denne pennen, innebygd nedenfor.

Hvis du har andre tanker eller forslag, kan du dele med utvikleren på Twitter @felice_gattuso.