permalink

52

The Missing Date-Time Selector for jQuery UI

Read Later submit to reddit

timepicker

Today I began work on a new UI for a client and I thought I’d share this neat Date-Time selection component that I think might be useful to some other developers. Rather than requiring you to go for separate Date or Time components, it’s got everything built into the interface quiet neatly. All you need to do to attach the component to a text field is setup a new datepicker (as shown in the example below). The component supports multiple instances and hopefully it’ll be as helpful to your projects as it was to mine. Btw, here’s the download.

  1. <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>  
  2. <!– core, slider, datepicker –>  
  3. <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>  
  4. <script type="text/javascript" src="js/timepicker.js"></script>  
  5.   
  6. <script type="text/javascript">  
  7. $(function() {  
  8.     $(‘#datetime’).datepicker({  
  9.         duration: ”,  
  10.         showTime: true,  
  11.         constrainInput: false,  
  12.         stepMinutes: 1,  
  13.         stepHours: 1,  
  14.         altTimeField: ”,  
  15.         time24h: false  
  16.      });  
  17. });  
  18. </script>  
  19.   
  20. <input type="text" name="datetime" id="datetime" value="01.06.2009 00:00">  
  21.     

 

52 Comments

  1. Pingback: Bookmarks von 18-09-2009 bis 22-09-2009 | News Navigators gebloggt

  2. Pingback: Bookmarks von 18-09-2009 bis 22-09-2009 | News Navigators gebloggt

  3. Pingback: The Missing Date-Time Selector for jQuery UI AddyOsmani.com Where Web Businesses Grow » Auto Post Script

  4. Pingback: The Missing Date-Time Selector for jQuery UI AddyOsmani.com Where Web Businesses Grow » Auto Post Script

  10. chris May 10, 2010 at 10:59 am Reply

    Is there a newer version of this? I'm having an odd issue where sometimes the time picker box gets hidden/stuck behind the calendar box.

  11. chris May 10, 2010 at 11:04 am Reply

    (cont) In the situations when this happens, it looks like the [ui-timepicker-div]'s "left' style attribute is off by a couple hundred pixels or so. Just mentioning in case that sheds more light on the issue.

  12. tinggi badan June 2, 2010 at 5:28 am Reply

    All you need to do to attach the component to a text field is setup a new datepicker (as shown in the example below). The component supports multiple instances and hopefully it’ll be as helpful to your projects as it was to mine.

    • @dhchow July 8, 2010 at 10:44 pm Reply

      If you set the value of the input field you are using to the desired date/time before you initialize the datepicker, it will set the default value.

  16. codered6969 July 15, 2010 at 1:38 am Reply

    The date picker portion is showing up well for me, however, I am using it in a modal JQuery dialog on top of a grayed out "cover" div, and the time picker div appears below my cover (z-index:10) and my dialog. Any ideas on how to fix this?

  17. Jason August 12, 2010 at 9:41 pm Reply

    Got to line 188 (approx) in the timepicker.js code. You will find a line that starts with this:

    this.tpDiv = $('<div id="'

    Scroll over till you find this html string fragment "ui-helper-hidden-accessible" style="width: 100px;"

    and modify it to add a z-index higer than 10 like so:

    ui-helper-hidden-accessible" style="z-index: 15; width: 100px;

    • Doug April 4, 2011 at 9:30 pm Reply

      I hit the same issue and resolved it by adding the line

      this.tpDiv.css('z-index', dpDiv.css('z-index'));

      to the function "show: function (input)" to always copy the datepicker's z-index.

  20. Ben September 2, 2010 at 4:38 am Reply

    Great widget. I noticed a couple of behaviors/bugs that I needed to alter to make it work with my setup;

    1. When clicking outside of the picker, the time and date are filled in, when I would prefer that to only happen if they click done – clicking outside the picker would equate to canceling the timepicker, as per normal datepicker behavior:

    2. I wanted the change event to be triggered after the whole thing had changed, not just after the date and before the time.

    The changes are preceded by // Ben:

    /**
    * Same as above. Here I need to extend the _checkExternalClick method
    * because I don't want to close the datepicker when the sliders get focus.
    */
    $.datepicker._checkExternalClickOverride = $.datepicker._checkExternalClick;
    $.datepicker._checkExternalClick = function (event) {
    if (!$.datepicker._curInst) return;
    var $target = $(event.target);

    // Ben: Capture if this was the done button or not
    $.datepicker._curInst.closebuttonclicked=$target.parents('.ui-datepicker-buttonpane').length

    if (($target.parents('#' + $.timepicker._mainDivId).length == 0)) {
    $.datepicker._checkExternalClickOverride(event);
    }
    };

    /**
    * Datepicker has onHide event but I just want to make it simple for you
    * so I hide the timepicker when datepicker hides.
    */
    $.datepicker._hideDatepickerOverride = $.datepicker._hideDatepicker;
    $.datepicker._hideDatepicker = function(input, duration) {
    // Some lines from the original method
    var inst = this._curInst;

    // Ben: was this triggered by the close button or external click?
    var closedbybutton = 0;
    try {
    closedbybutton=inst.closebuttonclicked;
    }
    catch (err) {}

    if (!inst || (input && inst != $.data(input, PROP_NAME))) return;

    // Get the value of showTime property
    var showTime = this._get(inst, 'showTime');

    // Ben:
    if (closedbybutton == 1)
    {
    if (input === undefined && showTime) {
    if (inst.input) {
    inst.input.val(this._formatDate(inst));
    // Ben: Move this to trigger the change after updating the time.
    // inst.input.trigger('change'); // fire the change event
    }
    this._updateAlternate(inst);
    if (showTime) $.timepicker.update(this._formatDate(inst));
    if (inst.input) {
    inst.input.trigger('change');
    }
    }
    }
    // Hide datepicker
    $.datepicker._hideDatepickerOverride(input, duration);

    // Hide the timepicker if enabled
    if (showTime) {
    $.timepicker.hide();
    }
    };

    • Paul September 6, 2010 at 8:16 pm Reply

      Great work Ben! Cheers for this 'fix' for the date changing even if the done button is not pressed. I noticed if you have two controls using the timepicker and you select one and then click straight on to the other one, the time sliders values are that of the previous control. If you instead click off of the first date time picker onto a different control and then click on the second date timepicker, its time slider values are correct.

  22. Kevin September 24, 2010 at 1:28 pm Reply

    I'm not sure where to post updates to the time picker code since the original site is down, but this seemed like the next most active place about the timepicker module. On line 214 of the v 0.2.1 the line needs to be changed to "this._inputId = input.id.replace(/(:|.|[|])/g, '$1');" this will allow for the use of text fields that have special characters in there name.

  23. Daily File October 1, 2010 at 11:46 pm Reply

    Admiring the time and effort you place into your weblog and detailed info you supply! I will bookmark your weblog and have my youngsters examine up here often. Thumbs up!

  24. Senthil Kumar October 30, 2010 at 10:42 am Reply

    Dude, you seriously rock! I wish i knew css as much as you know!! :) :) It works like a charm in all browsers. Posting your link in stackoverflow for reference. Most ppl should use it! i'm gonna use it!

  28. Remco November 4, 2010 at 4:47 am Reply

    Hi Guys, Has anyone made a time only picker from this cool date picker extension? I'm a widget consumer and not a programmer so I'm not able to figure it out. And since I've seen this slider time picker approach no other solution is good enough.

  29. Ven November 4, 2010 at 11:37 am Reply

    Anyone knows how to control the height and width of this control? I tried checking in the .js and .css files, but couldn't get much info. Any quick help would be really appreciated.

  32. Dylan December 15, 2010 at 8:55 pm Reply

    Great plugin! FYI I needed to remove the 'ui-helper-hidden-accessible' class on line 188 to get this to work with jquery ui 1.8.7.

  36. Dominor Novus May 9, 2011 at 11:23 am Reply

    There's a few other custom datetimepickers freely available but this rendition is my favorite. The overall horizontal layout with the vertical time sliders work well. Thank you.  

  37. 007 May 18, 2011 at 11:17 pm Reply

    Anyone knows how to control the height and width of this control? I tried checking in the .js and .css files, but couldn't get much info. Any quick help would be really appreciated.

    please help me…..

  40. Yuliya August 2, 2011 at 6:50 pm Reply

    Awesome thing, thank you so much!
    Btw, all controls are in jquery-ui-1.7.2.custom.css. If you need to decrease it, try changing 1.1oem to 0.7oem for .ui-widget. It's a quick fix, there are plenty of options to customize.

Leave a Reply

Required fields are marked *.

*