jQuery-UI Date and Time-Range Picker

Question

I'm creating a page to manage the our times at the office (for example when we made home-office). This requires selecting a date and then time-range.

I know about the Date-Picker from jQuery-UI, and there also seems to be something interesting for time picking. But since I need a start and end time, a UI to select date and time range would be perfect. Is there something you could recommend?

Answer 1

Visit jQuery UI datepicker range example and click "view source".

Combine with jquery timepicking solution found here.

That should hopefully get you going in the right direction.

Answer 2

Another interesting option could be handle the date in the date-picker and the time-range with a separated UI component (in this specific case start and end time are in the same day).

You can take a look at these time-range sliders:

$("#slider-range").slider(options_object);

http://jsfiddle.net/jrweinb/MQ6VT/

http://marcneuwirth.com/blog/2010/02/21/using-a-jquery-ui-slider-to-select-a-time-range/