jonthornton / jquery-timepicker Goto Github PK

I have a time picker inside a jquery ui dialog that can be dragged. The timpicker drop down list does not move along with the dialog any longer. It used to move along.

When using the timepicker in a scrollable div (e.g. a modal popup) the popup list position should be calculated by getting the offset within that div, not the whole window. Maybe create an option to specify a selector to get the parent "viewport" which may then be overridden with the div.

Now, if the timepicker is close to the bottom of the div, it still opens below the field and often creates a vertical scrollbar.

I'm on OS X 10.7.2, running Firefox 8.0.1. If I edit a time field and press Enter the hour advances by one. I'm in GMT (Dublin, Ireland), no DST at the moment.

Chrome 15.0.874.121 and Safari 5.1.2 don't display this problem.

Typically if you click out of the textbox the timepicker dropdown goes away (as expected).

It's possible to get the timepicker dropdown to stay "stuck" open by doing this (goal is to remove the time since the if is optional):

1. start with an initial value in the timepicker
2. click out of the textbox (to unfocus it)
3. click in the textbox (to focus it)
4. (with your mouse) select the text
5. hit backspace on the keyboard to clear the text
6. click outside of the textbox

Hi, I noticed something about this timepicker plugin that I think is undesirable/a bug.

That is, when the text box is blurred the timepicker ensures that the time/format is correct and adjusts it as necessary which is good, but it does not change the minutes to snap to the closest step.

So, I think the timepicker should snap the minutes to the closest value divisible by the step. e.g. If step = 30, and minutes = 36, minutes should change to 30 on the blur.

Here's a patch that I think causes the plugin to behave as described, let me know if this is correct!

--- jquery.timepicker.js    2012-12-18 15:42:18.544332284 -0500
+++ jquery.timepicker.mod.js    2012-12-18 15:40:47.409485373 -0500
@@ -243,7 +243,7 @@
        setTime: function(value)
        {
            var self = $(this);
-           var prettyTime = _int2time(_time2int(value), self.data('timepicker-settings').timeFormat);
+           var prettyTime = _int2time(_time2int(value), self.data('timepicker-settings').timeFormat, self.data('timepicker-settings').step);
            self.val(prettyTime);
        },

@@ -308,7 +308,7 @@
            var timeInt = i%_ONE_DAY;
            var row = $('<li />');
            row.data('time', timeInt);
-           row.text(_int2time(timeInt, settings.timeFormat));
+           row.text(_int2time(timeInt, settings.timeFormat, settings.step));

            if (settings.minTime !== null && settings.showDuration) {
                var duration = $('<span />');
@@ -401,7 +401,7 @@
            return;
        }

-       var prettyTime = _int2time(timeInt, self.data('timepicker-settings').timeFormat);
+       var prettyTime = _int2time(timeInt, self.data('timepicker-settings').timeFormat, self.data('timepicker-settings').step);
        self.val(prettyTime);
    }

@@ -522,7 +522,7 @@
        }

        if (timeValue !== null) {
-           var timeString = _int2time(timeValue, settings.timeFormat);
+           var timeString = _int2time(timeValue, settings.timeFormat, settings.step);
            self.attr('value', timeString);
        }

@@ -547,7 +547,7 @@
        return duration.join(' ');
    }

-   function _int2time(seconds, format)
+   function _int2time(seconds, format, step)
    {
        if (seconds === null) {
            return;
@@ -595,7 +595,12 @@
                    break;

                case 'i':
-                   var minutes = time.getMinutes();
+                   var minutes = Math.round(time.getMinutes() / step) * step;
+
+                   if (minutes == 60) {
+                       minutes -= step;
+                   }
+
                    output += (minutes > 9) ? minutes : '0'+minutes;
                    break;

Yesterday you changed the positioning of the dropdown list. You started setting "top" differently.

Previously it was like this:
"top": self.offset().top + topMargin + self.outerHeight()

Now it's like this:
"top": self.position().top + topMargin + self.outerHeight()

Using position() in this case only works when there are no parent elements who are positioned (relative, absolute, fixed). The minute you get an offsetParent() involved that isn't "body" you starting having positioning woes. Could you go back to using offset()?

If you'd like, I can submit a pull request if that would be easier.

Hi there

When adjusting the minTime for a second picker (to always show the correct times for the duration) it does not work when using a Date-Object with date.getMinutes() less than 10.
When using a String to set minTime it works...

Here is a quick jsfiddle: http://jsfiddle.net/F53vd/7/

Select 12:05 in the left input of working/nonworking and see how the selections for the right input are not the same. In the "non-working" example it tells me 12.05-12.30 is half an hour...

Please ignore the stupid placement of the selection lists :)

Error in position top when the page call by ajax. I have an external page and input box are there and when I click, the timepicker are always on top of the forms.

or just we say that there's an option that will automatically view the time list under the input box with auto positioning like in jquery autosuggest?

Sorry I dont know how can I attach the files. :)

Hi Jon,

You have wrong documentation on changing existing option (this cause an error in browser):
$('#optionExample').timepicker({ 'option', 'minTime': '2:00am' });
$('#optionExample').timepicker({ 'option', { 'minTime': '4:00am', 'timeFormat': 'H:i' } });

While the correct sample is something like (note the way we pass 'option':
container.find('input.end.time').timepicker('option', {'minTime': startTimeVal});

Cheers

I updated my version of Timepicker and now when I scroll past the beginning or end of the dropdown and it starts scrolling the rest of my page the dropdown will disappear.

The difference between the old version and the new version seems to be that the old version rapped the list in a div while the new version doesn't have a div wrapper around the ul.

To explain in a different way: I click on the timepicker and it pops up its dropdown list. If I scroll to the bottom of the list and then keep scrolling it will make the rest of the page scroll. At this point the dropdown list disappears.

If I edit the HTML by hand in Chrome to add a div wrapper around the new ul it doesn't have this behaviour.

It would be nice to be able to set the first value appearing in the dropdown to the current hour and minute. Very few people select events that happen between midnight and 6am, so scrolling past these 12 events feels like a bad interaction with the field.

I'm trying to use jquery-timepicker along with twitter bootstrap. It works fine, unless the timepicker input is inside a bootstrap modal.

The time list is not getting the click events, though visually everything looks fine (it has higher z-index than the modal and the overlay. Scrolling and hover styles work fine).

The issue has been reproduced at http://jsfiddle.net/Qkgxu/1/

I have an option where;

$('input.ui-time').livequery('focus', function(event) {
$(this).timepickerddl({
'timeFormat': 'H:i',
'step': '15'
});
});

but still user can input 01..02..03..05.......10 minutes in fields, how to eliminate or escape the input where that is not listed on the list?

Hi,
I have a timepicker that has a format with seconds, like "22:12:50". Once the timepicker is started, or when I use setTime, the time gets rounded to "22:12:00".

Here is a copy of the code from the inspector:

var time=new Date("2012-12-13 22:10:11");
>undefined

time
> Thu Dec 13 2012 22:10:11 GMT-0800 (PST)

$('#my_time_picker').timepicker('setTime', time);
> undefined

$('#my_time_picker').timepicker('getTime');
> Mon Oct 22 2012 22:10:00 GMT-0700 (PDT)

Commit 5ff862b is missing the closing paren on the ending (jQuery in the minified version

when I do

$.timePicker('#timePicker').getTime()

and the input value is "4:00 pm" it doesn't get the pm and transform it into 4am

I changed in your function timeStringToDate:

else if (hours !== 12 && input.indexOf('PM') !== -1) {

to

else if (hours !== 12 && input.toLowerCase().indexOf('pm') !== -1) {

and did the same for the line above:

if (hours === 12 && input.toLowerCase().indexOf('am') !== -1) {

Thanks.

Code submitted in the pull-request #54 breaks drop-downs in Firefox (Chome and IE10 are not affected). Due to "document.activeElement.blur" value can't be chosen with a mouse click.

slow popup list and the input go to the bottom of the page.

Hi,

First of all thanks for your superlike timepicker. I have an issue, I want to stop entering other times rather between mintime, maxtime. Is this function available or I missed documentation? I have tried forceRoundTime and also I dont know how to control after callback?

Looking for your response.

thank you.
praba

Everything else seems to be working fine. If I hover over the area for "previous", and I can click on it. But when I hover over the area for the "next" month, there isn't a button there.

http://screencast.com/t/i5K7eEyH

Couldn't figure out how to get this to work, but similar to how the list hides when you press "return" on the keyboard and you're calling methods.hide.apply(this); I'd love to get it to hide when you click a time.

Is it possible to have the drop-down menu display the 12-hour am/pm format, but upon selection the field is populated with the 24-hour version? I ask because in my rails app the actual value that goes into the db is in 24-hour format, but I'd like the user to be able to choose using the 12-hour format.

There is a handler for focusin on the body which stopPropagation and prevents focus handlers on input elements.
http://jsfiddle.net/RdSdW/

There is also a stopPropagation in the show function that prevents click handlers on elements containing inputs. http://jsfiddle.net/55snb/

I'm not sure what they are there for, but I have removed them from my fork. Is there a reason for them that I missed?

Thanks.

ie8 / ie7

when selecting a calendar in the datepair example (http://jonthornton.github.com/jquery-timepicker/) and clicking on the month or year, it does not bring up the choice of months and years, instead the overlay just closes.

also, selecting a date in the overlay does not show up in the input field

Hi

If you provide a min and maxtime, scrolldefaultnow no longer works. Is this by design? For times < min or > maxtime it could default to the min or max times.

Thank for you for a great timepicker :)

The display of seconds in the input (timeFormat: "g:i:s a") when seconds < 10 does not happen.

The bug is in the time2int function where the regex fails to match the seconds
timeRegex = /(\d{1,2})(?::(\d{1,2}))?(?::(\d{2}))?\s([pa]?)/;
should be
timeRegex = /(\d{1,2})(?::(\d{1,2}))?(?::(\d{1,2}))?\s_([pa]?)/;

this started happening today, after daylight savings time...i think it is related...

steps to reproduce:

1. click text box
2. choose time
3. click off text box

firefox/chrome both show this behavior...

Thanks!

In an older version I was able to enter a specific time (like 2:23) and if the field got /lost focus it would keep the time. Now it auto selects a time in the drop down.

This example shows where I set the time and went back and forth with tab focus and the time was changed:
http://screencast.com/t/szeZZPZ7w

Great job on the timepicker!

Just noticed an issue with the Datepair Example, here are steps to reproduce:

1. Select a date
2. Select 12:30am in the first time field
3. Select 1:30am in the second time field
4. Select 12:00am in the first time field
5. If you click the second time field again, the durations in parenthesis are still based off of 12:30am rather than 12:00am

This screenshot says it all:

My input tag is pretty classic:

<input class="time start ui-timepicker-input" id="starts_at_time" name="starts_at_time" type="text" value="2:30pm" autocomplete="off">

The CSS property that provokes this is:

input, textarea, select, .uneditable-input {
  margin-bottom: 9px;
}

jQuery UI datepicker does not have this issue (I'm using datepair.js).

It can be very helpful to create a getTime() function in order to make comparison between two time inputs...

I have two date pickers in my page . I have used like below ,but it is now working .
here "dateStartDate " is first date picker date value

$("#textEndDate").datepicker({ 'minDate': dateStartDate });

or

$("#textEndDate").datepicker({ 'minDate': "11/07/2012" });

I want to disable all date before minimum date.

First of all thanks for this plugin. Was searching for something like that for a long time.

But i have problems using the jquery ui datepicker and the time_picker together. They both work seperately in the same form but when i try to use them together the input field of the datepicker becomes a textfiel without datepicker functionality

This is my java code

$(function() {
$('input.time_picker').timepicker();
});

$(function() {
$("input.date_picker").datepicker();
})

I hope u can help me. Thank you

We have a scenario where we have a time picker in a modal dialog. The modal has a fairly beefy z-index, but this is set with our stylesheet. Unfortunately jQuery.css("zIndex") does not pick this up.

It would be nice if we could 1) just set the z-index with a stylesheet. Currently the plugin explicitly sets that property which overrides our stylesheet. or 2) send in the z-index as an option. or 3) go back to setting the z-index to 10001 which worked in our case, though is less flexible.

If you'd like, I can submit a pull request if that would be easier.

It seems that timepicker can't work on ajax loaded element....

When input initially has a value:
<input type="text" value="10:00 am" />
Timepicker will show up, but it will not change the value to the selected time.

Tested in Chrome 16 and Firefox 9 on a Mac OS X 10.7.2

I wanted to change the date display for the date pair, but I can't seem to get it working. Rather than m/d/Y I wanted d/m/Y.

Hi,

On a daylight change (only 2 days a year), _baseDate is wrong because timezoneOffset is calculated at midnight (and daylight occur at 3am).

Here is what I do to initialize _baseDate:

    var _baseDate = new Date();
    var _currentTimezoneOffset = _baseDate.getTimezoneOffset()*60000;
    _baseDate.setHours(0); _baseDate.setMinutes(0); _baseDate.setSeconds(0);
    var _baseDateTimezoneOffset = _baseDate.getTimezoneOffset()*60000;
    _baseDate = new Date(_baseDate.valueOf() - _baseDateTimezoneOffset + _currentTimezoneOffset);

Using jquery 1.9.1
Set a TP value.
Change that same TP value.
New value is not updated in TP

In datepair.js, "m/d/Y" format is hardwired on lines 94, 105, 108, 191. When using another format, such as 'yyyy-mm-dd' and the end date is set before start date, the start date spazzes out.

Pretty slick plugin. It would be nice though to know how to retrieve the selected time.

I browsed through the source code and I see that there is getSecondsFromMidnight method. So I tried to do so - $('#setTimeExample').timepicker('getSecondsFromMidnight') based on $('#setTimeExample').timepicker('setTime', new Date()); snippet int he documentation. But it returns a null.

You show an interaction example, but not the code that initializes it.

Should change your documentation. Your plugin failed when I run with JQuery 1.6.2. It comes with script error : Object doesn't support method 'on'

JQuery 1.6.2
IE 9

But it does run correctly with latest JQuery 1.8

As the title says, if step option is set to 15, 23:45 (11:45pm) is missing from the list.

I was wondering if there is a way to prevent certain times from being displayed in the dropdown similar to Jquery Datepicker beforeShowDay?

So for example if I have a appointment scheduled and I'd like to prevent that appointment time from being displayed how could I do this?

Thanks

I'm having problem with timezones in the date picker...

My browser is in GMT +1.

When I select a time from the drop down, the time is put into the input box.

When I click away, the time is updated - to 1 hour ahead of the selected time.