date range

[dudo]

me again... can i make a date_range[:finish] automagically match the start all the time?

as it stands, if I pick a date that's after the current date, it picks a corresponding matching date. so date_range[:start] == date_range[:finish] only if i'm picking times in the future. can we make that same action happen for past dates?

[eternicode]

Date range pickers are currently implemented as two separate pickers coordinated by a DateRangePicker object -- the DRP makes sure that the start picker never has a date after the finish picker, and the finish picker never has a date before the start picker, by adjusting the selected dates if these scenarios occur. So when you see the dates match when you pick a future date, it's because you're only picking in the start picker; if you opened the finish picker and selected a past date, you'd see the same behavior.

To have finish always reset when a new start is selected, you'd need to write some js to hook into the start's changeDate event and set finish's selected date every time.

[dudo]

    dateUpdated: function(e){
        var dp = $(e.target).data('datepicker'),
            new_date = dp.getUTCDate(),
            i = $.inArray(e.target, this.inputs),
            l = this.inputs.length;
        if (i == -1) return;

        if (new_date < this.dates[i]){
            // Date being moved earlier/left
            while (i>=0 && new_date < this.dates[i]){
                this.pickers[i--].setUTCDate(new_date);
            }
        }
        else if (new_date > this.dates[i]){
            // Date being moved later/right
            while (i<l && new_date > this.dates[i]){
                this.pickers[i++].setUTCDate(new_date);
            }
        }
        this.updateDates();
    },

could we add a if (new_date < this.dates[i] || !this.dates[i]){finish = start} type of code, maybe? There's obviously more to it, but I'm thinking out loud. basically, I just don't think the user should ever have to pick 2 dates if they don't have to, you know?

[eternicode]

So basically, you think the concept should be that the first selected date should be set everywhere, if the other picker(s) don't have any current value? Seems reasonable.

[dudo]

=)

[dudo]

Just a heads up, I dropped those 5 lines into my 1.2 version and it didn't work. I'm not sure if there are some core changes in 1.3 that would make it work. If so, nm =)

[eternicode]

Yeah, explicit support for this.date being undefined is new to 1.3, so it may not work with 1.2 as-is.

[eternicode]

Although if you could test the latest master in your project, just to make sure it worked, I'd appreciate it 😉

[dudo]

You're a gentleman, and scholar! Works like a charm. Thanks!

[eternicode]

👍

[dudo]

whoops. Just noticed something. Before, the picker would default to today's date when you opened it up. Or, for an inline picker, it would just be picked. That is gone (not sure if on purpose). So, not the 'default value', if you will... but just a reference of today's date, I guess.

[dudo]

Any update on this?

[eternicode]

Sorry I missed this -- previously, the picker didn't entirely know how to handle "no selected date". The latest version has actual support for "no date selected", so that's how the picker appears when it doesn't have a date, instead of "highlighted but not actually selected".

If you want to reference today's date, I recommend using todayHighlight.

[dudo]

Nice!! That was easy, thanks!

I have one more suggestion. I thought of this while laying in bed last night. Right now, the date range is accomplished with 2 separate calendars. With a mouse, we have 2 types of clicks (well, usually more, but 2 standard). On a mobile device we have a long press. I'm thinking, could it be plausible to merge the calendars together to allow picking a range on a single calendar? Start date with the left click, End date with the right click. If you didn't want to use right click, maybe use mousedown for Start, and mouseup for End?? I almost like that more, then you don't have to worry about overriding the default right click actions. It'd work more natively on mobile as well...

Just a thought! Let me know what you think =)

[eternicode]

Interesting idea, but I'm afraid it's too nonstandard :) Any single-picker approach to ranges should be intuitive to the user -- for example, click-and-drag from beginning date to end date (effectively your mousedown/mouseup idea; this wouldn't work for cross-month ranges, though) or, better yet, simply selecting beginning and end dates and letting the app sort out the range.

Now that multidate is supported, I think that's a really strong candidate for a new single-picker range approach. Effectively, a single range picker would be no different from a multidate picker, apart from shading the dates between the selected dates. I haven't put too much thought into it, but that's the gist.

[dudo]

I like it. That makes total sense. Then you just enable daterange when it's initiated. I can't wait for that! Let me know if you need testing =)

[jptissot]

Not too sure where to put this but I did not want to start a new issue.

I think it would be usefull if there was an option to make the second date picker automatically open when the first date is selected.
I was able to make the second input appear by modifying the code in the DateRangePicker dateUpdated function

        dateUpdated: function(e){
            var dp = $(e.target).data('datepicker'),
                new_date = dp.getUTCDate(),
                i = $.inArray(e.target, this.inputs),
                l = this.inputs.length;
            if (i == -1) return;

            //Added code
            if (i == 0) {
                $(this.inputs[1]).datepicker("show");
            }

            if (new_date < this.dates[i]){
                // Date being moved earlier/left
                while (i>=0 && new_date < this.dates[i]){
                    this.pickers[i--].setUTCDate(new_date);
                }
            }
            else if (new_date > this.dates[i]){
                // Date being moved later/right
                while (i<l && new_date > this.dates[i]){
                    this.pickers[i++].setUTCDate(new_date);
                }
            }
            this.updateDates();
        },

Of course this is not an optimal solution because it forces the second datepicker to show every time but it work for me.

[dudo]

if we get the single calendar date range, then this will become moot.

[jptissot]

That would be nice indeed.
One thing i would like to see is the range affecting two hidden inputs. I've tried to use this calendar widget before but it only plays nice with a single input and it makes things a little more complicated to handle server side.

https://github.com/dangrossman/bootstrap-daterangepicker

If we could have two inputs in the background it would be perfect.

[dudo]

I found this date picker on kayak - http://www.kayak.com/flights

Single calendar date range picker... snazzy with the arrows!