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.

Answer 1

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

Answer 2

Datejs is very close to what you are asking for.

Answer 3

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" :-)