Add timepicker

[rchavik]

This is based on bufferapp's fork applied on top of master. It has been rewritten to display seconds instead of meridiem.

Usage example:

    $('#NodeCreated').datepicker({
        showTime: true,
        autoclose: false, // when showTime is true, autoclose is ignored
        todayBtn: true,
        todayHighlight: true,
        clearBtn: true,
        format: 'yyyy-mm-dd H:i:s'
    });

Here's how it looks:

[jeremyhaile]

Are seconds optional? I typically never want to ask my users to enter seconds. And I do want to ask them meridian. So I think those should be options.

[rchavik]

@jeremyhaile i went for the easy route for now.

@kia84 yeah.. that was copied from the original.

i see travis failed for some tests as well, but before i fix these up, i'll wait @eternicode's comment whether this is potentially mergable or not.

[korun]

:+1: for this PR! This is a useful thing that we are waiting for a long time.

[norbornen]

i agree with kia84!

[tmorehouse]

Being able to set "steps" for the minute (and possible hour), or a min/max value would be useful as well.

I have a situation where I would like users to be only able to pick minutes that are 00, :15, :30 or :45, and restrict the hour to a range of 07 to 22.

Seconds I don't need, but could be a useful optional field.

[korun]

Maybe @eternicode will answer only after successful completion of tests?

[darklow]

@korun and @rchavik Thank you for your code and time picker. From all the available forks, this one looked the best and actually worked. I also made few improvements in my fork (i forked from @rchavik) regarding to add-timepicker branch and made a full request. I also have few bugfixes ready that are related to master branch not timepicker. Since it doesn't look like @eternicode will answer i decided to merge this branch time-picker into master and i will continue some fixes there if anyone is interested. https://github.com/darklow/bootstrap-datepicker

[guypaskar]

@rchavik @darklow First off , this is by far the most simple and easy to use time picker! Great job... I think I have found a bug in this fork regarding UTC time parsing but I'm not sure how to fix it yet.

The bug goes like this.

I'm in gmt+2 time zone and I set the date time picker with a date string like this:

$('#end-date').datepicker('update', '27/12/2014 23:59');

When I open the datepicker and I try to select a day back (the 26th) I can't because of the following line:

this._setDate(UTCDate(year, month, day, h, m, s));

year = 2014 , month = 11, day = 26 , h = 23 , m = 59 , s = 0 UTCDate(year, month, day, h, m, s) = Fri Dec 27 2013 01:59:00 GMT+020

the result is that nothing changes...

I tried playing with the date changing the timezone offset and what not without luck.

Any ideas?

[korun]

I created issue for this, thanks @guypaskar.

[guypaskar]

@korun Thanks.

Have you also confirmed the bug?

[acrobat]

@korun is there a reason why you created an issue in your own fork and not in this issue tracker?

[korun]

@korun is there a reason why you created an issue in your own fork and not in this issue tracker?

@acrobat, I create issue in fork because I don't know will be this PR merged in original repo, or not.

[acrobat]

@korun oh ok. But this PR is planned for the 1.4.0 release, which is the next release after 1.3.1. And the 1.3.1 release will be ready and released around the end of this week i think. Then we start working on 1.4.0!

[korun]

Have you also confirmed the bug?

@guypaskar, I can't repeat this behavior yet. My results are very strange:

$('#q_occurred_at_lteq').datepicker('update', '27.12.2014 23:59');
// picker was set to "12/15/2014", ignore my format "dd.mm.yyyy"

I'll try something else later.

@acrobat, good news! :smiley: I'll try add some more tests, and, maybe, options on this weekend. I think it makes sense to create issue right here only after this PR has been accepted.

[acrobat]

@korun great! Maybe a good option to add is that the seconds picker is an optional field, but I will review still whole pull request soon!

[guypaskar]

@korun did you manage to reproduce the bug?

[korun]

@korun did you manage to reproduce the bug?

@guypaskar, not yet, too busy now. I think I can do this at weekend.

[guypaskar]

Cool. Thanks.

[korun]

@guypaskar I can reproduce bug, but I have no idea how to fix it right now. :(

[guypaskar]

Ok. I found the issue. it's in the function contains of DateArray.

contains: function(d, ignoreTime){ // Array.indexOf is not cross-browser; // $.inArray doesn't work with Dates var val = d && d.valueOf(); ignoreTime = typeof(ignoreTime) === 'undefined';

            if (ignoreTime) {
                val = d.getFullYear().toString() + d.getMonth() + d.getDate();
            }
            for (var i=0, l=this.length; i < l; i++)
                if (ignoreTime) {
                    var t = this[i].getUTCFullYear().toString() + this[i].getUTCMonth() + this[i].getUTCDate();
                    if (t === val) {
                        return i;
                    }
                } else {
                    if (this[i].valueOf() === val)
                        return i;
                }
            return -1;
        },

it returns 0 even though the date is not found in this.dates. since

val = d.getFullYear().toString() + d.getMonth() + d.getDate(); and var t = this[i].getUTCFullYear().toString() + this[i].getUTCMonth() + this[i].getUTCDate();

one is UTC and one is not then it returns the same date for some hours selection. I think that the ignoreTime is there to solve it but no one is calling it with ignore time = false....

What do you think?

[Hoverbear]

@acrobat I see this is no longer on the 1.5.0 milestone. Do you need anything else to help land this?

[russplaysguitar]

This would be a nice feature to have

[acrobat]

Yes indeed, I just think this PR needs some more fine tuining. For example the option to disabled/hide seconds

And we should check if @guypaskar's problem is solved

[nhouse]

@russplaysguitar I found this fork and am currently testing it out: http://www.malot.fr/bootstrap-datetimepicker/

[simplenotezy]

can we have this pulled into main repo please?

[simplenotezy]

I tried pulling in latest commit using:

"bootstrap-datepicker": "[email protected]:rchavik/bootstrap-datepicker.git#5d82d35f54c25b8cebda0c0f7493a39a80f1c4e8",

However the datetimepicker does not have a time field, even though i copied your example in first post. When I click at a date, it populates the input field like this:

2015-12-18 H:i:s

What am I doing wrong?

@rchavik

[simplenotezy]

It seems the latest commit / version does not contain any dist files other than:

dist/css/bootstrap-datepicker.standalone.css

The JS is missing from dist.

If I use this:

js/bootstrap-datepicker.js
dist/css/bootstrap-datepicker.standalone.css

Instead of:

dist/js/bootstrap-datepicker.min.js
dist/css/bootstrap-datepicker3.min.css

It works

[simplenotezy]

Also when changing the dates, the "time" is lost.

I am using commit:

5d82d35f54c25b8cebda0c0f7493a39a80f1c4e8

[acrobat]

Time support is something we would like to add in 2.0+

[deepakmahakale]

I am still in need of the timepicker. I just have to use another library because of timepicker requirement.

Otherwise, I have all the options toDisplay toValue which I need in this library