Adding a Time Selector to the jQuery UI Datepicker Widget

jQuery , Web development Add comments

One of the functional requirements for the voter registration application I blogged about recently was that the application should not allow further registrations between the registration deadline (October 16 at 9pm) and a date after the election specified by the state Board of Elections.  For the initial run of the application, I simply hard-coded the deadline and restart date into the application logic, knowing full well I couldn't leave it that way unless I wanted to personally change the code year after year....which I don't.

So this week I set out to write a tool within the administrative interface of the application that would allow a non-programmer to update the deadline and restart date every year.  The jQuery UI Datepicker widget is my tool of choice when it comes to having users enter or edit a date, but I've used a few different approaches to having users enter a time of day.  This time around, I decided to see I if could find something comparable to the Datepicker widget for setting the time.

What I found was a rather sweet plugin called the Timepicker Addon that adds a set of time controls to the jQuery UI Datepicker.  If you customize your jQuery UI download to include both the Slider and Datepicker widgets, you can present the time controls as sliders, like so (without the Slider widget, you get select boxes):

Example of time picker

The plugin comes with a number of configuration settings so you can do things like adjust the time increments, change how the time is displayed, and allow the user to denote the time zone associated with the time value.  Once I had the plugin configured the way I wanted, I simply had to write some code to validate the date and time string submitted from the form field, and I was done.  Very cool.

6 responses to “Adding a Time Selector to the jQuery UI Datepicker Widget”

  1. Jose Galdamez Says:
    The timing of this post is uncanny. I too found out about this widget earlier this week. The fact that it builds on top of jQuery UI is what sold me (i.e. it doesn't try to reinvent the wheel). It was rather easy to implement as you point out, and the ColdFusion server-side logic was able to parse the form string into a native date/time object with no problems. One thing I noticed is that it uses a 24-hour clock by default. I see that you changed the configuration to get around that.

    My supervisor was impressed at first, but for some reason it didn't work in Chrome. I have my doubts that the plug-in is broken in Chrome. There is probably just a JS conflict somewhere. Being that it's a legacy app the site is bloated with JS/CSS includes. I would've debugged it to see why it was broken in Chrome, but my supervisor asked that I go back to the "old school" approach and use separate drop downs for the hour, time, and AM/PM values. Since this is for an admin page that only a few users will see it's not that big of a deal, but I sure would like to figure out the bug.

    If you include the jQuery UI CDN URL I don't think you even have to worry about including the Slider and Datepicker widgets. It just seems to work out of the box.
  2. Brian Swartzfager Says:
    @Jose Bummer about the Chrome issue. I can tell you that my implementation of it does work in Chrome, so you're probably right about there being some other JS issue at work.

    Missed you at the CACFUG meetup on Tuesday, by the way.
  3. Jose Galdamez Says:
    @Brian I was planning on attending the meeting, but I got home late and had lots to do before Wednesday. I hope I can make it out to the next CACFUG meetup!
  4. Fadi El-Eter Says:
    The slider for the time is interesting - I also like the fact that you can set the increments (e.g. 5 minutes, 10 minutes, etc...)

    Every time we use a date picker we end up adding separate fields for hours and minutes (usually we go with a 15 minute increment) - having this feature incorporated in the picker itself will save a lot of time.
  5. Abhinav Says:
    Thanks for the post . I have successfully implemented this in my application . But I have an issue: i have saved the date and time for an event using this now when I come back to this in the edit mode and try I can only see the date being selected where as the time Remains 12 am and 00 mins.
    Please help me with this.
  6. Brian Swartzfager Says:
    @Adhinav: On your edit page, are you populating the text box associated with the Timepicker with both the date and time in the proper format? In my app, if the text box has the value:

    10/08/2014 6:00 PM

    ...then when I click on the text box the time slider will be set to 6pm: I didn't have to write any of my own code to make that happen.

    I have the ".dtPicker" class assigned to my text box, and this is the code that binds it to the Timepicker plugin:

    $('.dtPicker').datetimepicker({
    timeFormat: "h:mm TT",
    ampm: true,
    changeMonth: true,
    changeYear: true,
    yearRange: "-1:+1"
    });

Leave a Reply