Date/Time input for an HTML Form

Question

I'm having trouble finding an elegant way to allow for date/time input in an html form. I am thinking of having drop down menus for year, month, day, hour, minute, second, millisecond that are populated with valid entries only. I could do this by hard coding values for each drop down menu, but I'm thinking there must be a more elegant way to do this, perhaps with some already existing javascript library that I have not found yet. Any tips for getting this done?

edit: Second, and if possible, millisecond precision is needed for what I'm working on.

edit#2: After reading some of the comments, I have come to the realization that it is probably a bad idea to have drop down menus for the large range of values required by hours/minutes/seconds and especially milliseconds. I think will go with having the DatePicker prototype date chooser, along with a simple textfield for time input.

Solution 1

This can be done quite elegantly with a Jquery plug-in called Datepicker

Solution 2

There are many calendars which can do this, with both date and time :

• Calendar Date Select
• Control.DatePicker (based on PrototypeJS) my favourite, I made an enhanced version, with more features, I can share it
• Dynarch calendar but I find it too heavy
• and others

Solution 3

I think a very easy way to do this is by using PHP i.e. for making choosing a day and a month:

Use the select command for the form, then insert a PHP line to initiate a for loop. So for the days the loop would go from 1 -> 31 and for the month from 1 -> 12. So instead of hard coding it for all the days months etc, you can neatly fit it into one line of code with a small bit of PHP added.

Comments

[Matthew]

This is similar to what I'm looking for, but Datepicker doesn't support choosing times.

[alecwh]

Mathew: I'm currently using Datepicker, and an additional textbox for selecting a time. It works well if it's simple/understandable.

[Matthew]

These all look very good, and I am using the prototype js library, but I need something that has second, and if possible, millisecond precision. Sorry, I should have mentioned this before.

[Dennis Ruiter]

Well, I don't think there are any JS calendar able to give a millisecond precision, but Control.DatePicker could be a good basis to make your own millisecond-precision time selector !

[Matthew]

alecwh: Do users enter the time by typing something like "12:00:00" into the textbox? This is what I'm currently doing, but I feel like it would be nice to have drop down select boxes to aid in error checking and prevent input typos by the user.

[Rob]

@Matthew: Ew, drop-downs for a large range of values? That's actually less usable. If possible, use a free text field and parse as wide a range of delimiters as possible.

[Dennis Ruiter]

Another possible solution would be to use an input mask : phenxdesign.net/projects/phenx-web/controls/example.htm It works with PrototypeJS

[Robert Koritnik]

@Rob, @Matthew: Choosing time can be quite easy using sliders. No excessive dropdowns... And you can have as many as you need: hour, minute and second if you like. Easy to use and understand and no clutter. Check this one out: milesich.com/timepicker