Question

I’ve looked around, and I do see previous questions where people ask about Date/Time pickers; unfortunately none of those threads matched my specific needs. I see a lot of people recommending Any+Time as well, but it seems a little “heavy” and I’m looking for lightweight.

Basically, I have the need for a date/time picker for “events”. The event-search picker here (http://jqueryui.com/demos/datepicker/#event-search) is very nice, but it doesn’t handle time. My form is built on jQuery, so I’m okay with using that.

• Must be able to select both date and time
• End time form should be hidden until the start time is selected.
• After the start time is selected, end time should automatically be set for 6 hours later
• Should not be able to select an end time that takes place before the start time
• Should be able to handle timezones, and default to the user’s current timezone
• Should be able to send out a UTC timestamp (I will store in a hidden field; ex: 1291004863)

Your recommendations are appreciated… I dont know much about Javascript.

Answer 1

I would try extending the jQuery UI datepicker with the modifications made on the following page:
http://addyosmani.com/blog/the-missing-date-time-selector-for-jquery-ui/

The jQuery UI event search example code would only need the new parameters added as to make it work.

Hope that helps!

Edit:
Example code for datepicker range (using code from link above):

-HTML-

<p>
    <label for="from">From:</label> <input class="datetime" type="text" name="from" id="from" value="" />
    <label for="to">To:</label> <input class="datetime" type="text" name="to" id="to" value="" />
</p>

-js-

$(function() {
    $('.datetime').datepicker({
        duration: '',
        showTime: true,
        constrainInput: false
     });
});

Here’s a link to see in action:
http://bit.ly/hZTR84