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.

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.

• javascript
• html
• datetime
• forms
• input

• I'm interested in knowing why you need time input, especially milliseconds. Care to elaborate? – Will Rickards Commented Jul 20, 2009 at 21:14
• @Will Rickards: I am developing a web application that displays logs that have millisecond precision timestamps. In this application, the user enters the start and stop date/time, and the relevant logs are displayed. New log entries are generated very frequently, sometimes more than once per millisecond, so precision is needed in specifying the timeframe over which to view the logs. – Matthew Commented Jul 20, 2009 at 21:19

3 Answers 3

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

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

• Calendar Date Select
• and others

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.