Can tab open the datepicker

[GoogleCodeExporter]

Right now, I set it to open when the field is clicked on, which is great. 
However, lots of people tab 
through fields. Is there some code to add to allow it to also open when you tab 
to the field?

Original issue reported on code.google.com by rareview...@gmail.com on 22 Jan 2009 at 6:14

[GoogleCodeExporter]

I did find this code: 
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerOnFocus.htm
l

However, there some usability issues. I am trying to use it with the code that 
has a start/end date tied 
together and pops open the calendar when the field is clicked. 

The issue I see is if I tab to the field, the cal opens. If I tab away, it 
stays open (it should close). Also, if I put 
the tab on both the start-date and end-date ID's, when I click in other fields 
they don't seem to work in 
safari. You have this problem in your example. Tab to the first date, pick a 
date, and then try to "CLICK" in the 
other field, which doesn't bring up the calendar and doesn't seem to work. I'm 
in safari 3.2 or whatever is the 
latest. 

Original comment by rareview...@gmail.com on 22 Jan 2009 at 6:39

[GoogleCodeExporter]

Same problem here in Firefox 3 on Mac. Once you use the datePicker, you can't 
click
in other fields on the form -- if using .bind('focus'...) on the date-pick 
element as
shown in:
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerOnFocus.htm
l

This is odd since the focus should only be being bound to date-pick elements, 
but
when I comment out the .bind part, selecting other fields is no longer a 
problem.

Original comment by L5eone...@gmail.com on 22 Jan 2009 at 9:32

[GoogleCodeExporter]

Hi guys,

Thanks for the bug reports... I've just spent quite a while trying to get cross
broswer focus/ blur working and I think it's pretty much there. Check the new 
example:

http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerOnFocus2.ht
ml

Please let me know how it works out for you. As you can see, it doesn't seem to 
be
that easy to deal with focus/ blur in a cross browser manner. My other idea was 
to
take the delegation approach described here:

http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html

I wasn't sure that jQuery allowed you to access the capturing phase through it's
event model though and I didn't want to retreat into standard JS...

Cheers,

Kelvin :)

Original comment by kelvin.l...@gmail.com on 26 Jan 2009 at 5:33

[GoogleCodeExporter]

Wow, thanks Kelvin for helping out, this is great. I'm still having an issue on 
my end, but your example works great. I'm trying to combine a couple of things, 
like the binding of the start/end dates, with the tab. 
Here's what I'm starting with, which works, could you help me integrate the tab 
focus into this? If I can get it work, I'd be happy to make a donation, as this 
is going to be in our application! :) 

--
    Date.firstDayOfWeek = 7;
       $(function()
          {
            $('.date-pick').datePicker({clickInput:true, createButton:false})
                $('#start-date').bind(
                    'dpClosed',
                    function(e, selectedDates)
                    {
                        var d = selectedDates[0];
                        if (d) {
                            d = new Date(d);
                            $('#end-date').dpSetStartDate(d.addDays(1).asString());
                        }
                    }
                );
                $('#end-date').bind(
                    'dpClosed',
                    function(e, selectedDates)
                    {
                        var d = selectedDates[0];
                        if (d) {
                            d = new Date(d);
                            $('#start-date').dpSetEndDate(d.addDays(-1).asString());
                        }
                    }
                );
                $('#start-date2').bind(
                    'dpClosed',
                    function(e, selectedDates)
                    {
                        var d = selectedDates[0];
                        if (d) {
                            d = new Date(d);
                            $('#end-date2').dpSetStartDate(d.addDays(1).asString());
                        }
                    }
                );
                $('#end-date2').bind(
                    'dpClosed',
                    function(e, selectedDates)
                    {
                        var d = selectedDates[0];
                        if (d) {
                            d = new Date(d);
                            $('#start-date2').dpSetEndDate(d.addDays(-1).asString());
                        }
                    }
                );
            });

Original comment by rareview...@gmail.com on 26 Jan 2009 at 5:52

[GoogleCodeExporter]

I see, you changed the main JS file. Now I can get it  to work. One thing I 
noticed, in IE, if you tab to the first 
filed, select a date, and then hit tab, it goes back to the top of the page and 
doesn't go to the next date field. this 
might just be a tabindex thing, which is simple, or it could be a bug in IE, 
not sure. Otherwise, my tests in safari, 
IE 7-8, and FF seems to work perfect. I think this is a big feature. Most 
people tab between fields nowadays. :)

Let me know when it's finalized. I'll try to work it in with the start/end date 
binding. :)

and thanks!

Original comment by rareview...@gmail.com on 26 Jan 2009 at 6:17

[GoogleCodeExporter]

I seem to have gotten it to work, I think, but when my date box pops open, up 
top instead of saying "January 
2009" it now says "01/01/2009." I like it the other way of course. Did 
something change in the new files, or how 
do I change that back? Thank you.

Original comment by rareview...@gmail.com on 26 Jan 2009 at 6:30

[GoogleCodeExporter]

Quick response to your last point because I'm at work...

You need to also grab the latest date.js so the header works properly...

Re. the IE issue, it's known and there is a comment in the code around why it's
occuring... I'm not sure of a clean solution yet but I'll try and come up with 
something,

Cheers,

Kelvin :)

Original comment by kelvin.l...@gmail.com on 26 Jan 2009 at 7:02

[GoogleCodeExporter]

Got it, working great now. Sorry about the confusion. I think the IE tab thing 
is the only issue I noticed, 
otherwise, it's great. I think it's usable as is, so the IE tab fix would be 
gravy. Good luck and keep me posted, if 
you don't mind. We won't be launching the update to our app until this summer, 
but we really like your 
datepicker. We pimped it out:) 

Original comment by rareview...@gmail.com on 26 Jan 2009 at 7:20

[GoogleCodeExporter]

Any chance for a new switch to handle (like clickInput, or handle it with that) 
this
focusing/blurring stuff without actual coding this?
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerOnFocus.htm
l

thanks

Original comment by pihentagy on 16 Jun 2009 at 4:04