Tutorial :user-friendly time entry



Question:

In my project (based on php/mysql/jquery ) i need the user to enter time.
But it seems very annoying to enter the time in strict formats like
06:00 PM
or 14:00

So i want to give the user freedom to enter time in a very friendly way like
6 pm, 11am etc
or
14
which will then be converted internally into a strict time format for further processing. Can anybody suggest me any good plugin . If no plugins are there please suggest me how to approach.


Solution:1

What I tend to do for date and/or time fields is let the user enter it in whatever format they like, then format it back to a "universal" particular format on blur of the field. Date.js is incredibly handy for both the parsing and the formatting.

Something like

$('.timeboxme').blur(function() {      var $el = $(this);      var theDate = Date.parse($el.val());      if(theDate) {          $el.val(theDate.toString("HH:mm"));      } else {          //it didn't appear to be a valid date/time, tell the user      }  });  

As a bonus, if you use date.js, you get some fancy tricks you can tell the user about, like "+3 hours" or "last hour" :-)


Solution:2

Datejs is very close to what you are asking for.


Solution:3

here's an interesting jquery plugin i found recently

http://haineault.com/media/jquery/ui-timepickr/page/


If you dont wan't to use a jquery plugin my best recommendation would be to use select boxes

3 selects would do it

[hour][minute][ampm]

or even

[hour][minute]

if you went the 24hr route


to me allowing someone to enter '14' into a text to the user


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »