Once the date picker is open, if the user presses an arrow key followed quickly by a different arrow key the date picker closes and the focus is reset to the top of the page.

While JAWS is running, the datepicker is not controllable via keyboard. I see that you applied role=application to the div and role=grid to the table and I'm not sure if one is overriding the other but it appears that the application role isn't being respected in order to release the control of the screen reader. The problem seems to be present in the latest version of JAWS and NVDA.

If it helps, here is a demo of a datepicker that works with JAWS:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Date%20Pickers/ARIA%20Date%20Picker%20(Basic)/demo.htm

And some explanation of some details of the tag nuances:
http://whatsock.com/training

Hovering over the tfoot (statusbar) should change the cursor to a "move" cursor if the datePicker is draggable. This is currently not the case.

Is there any way to bind the datePicker to any new .date_picker elements added to the dom? Thanks!

This isn't so much an issue as an inquiry. I searched for an email address for you but didn't find one. Either I didn't search hard/long enough (highly likely), or you don't want to have emails sent directly to you (quite possible, which is fine...just acknowledging the possibilities).

I've noticed that when my dateset callback is called, the associated form element has not yet had its value updated. I looked at the code, and I see that you are calling the dateset callback right before returnFormattedDate, which is where the value gets updated. I'm wondering if it would make more sense to call the dateset callback after updating the value in returnFormattedDate.

I do see, however, there is one time you call the dateset callback without calling returnFormattedDate (in changeHandler) and one time you call returnFormattedDate without calling the dateset callback (in setDateFromInput). Will you shed some light on the reasoning?

Beyond that, is it possible for datePicker to fire the associated form element's change event after updating it? That would really solve my problem and possibly be the right behavior.

If an input is hidden via display:none in IE7/8 and you try to give it focus, IE will through a "Can't move focus to the control..." error. So, I've changed the fd-hidden-input class to fd-screen-reader and all is fine.

That said, any recommendations on the best way to handle a user tabbing into that hidden input and forcing them to use the datepicker?

I am working on an application that dynamically generates forms and would like to pass the DOM node into the constructor instead of an element ID, or perhaps even an class name.

Seems I stumbled upon an error by accident. First I loaded a form on a modalBox(jqueryUI), then cancel/close the form, then load again the form on the modalBox, click the datepicker icon, error encountered.

"TypeError: this.div is undefined"

The header is displaying with 0 height and width in Safari. You can see this pretty clearly from this Fiddle.

Safari:

Chrome:

Hi,

I have been using this plugin in one of my projects. I appreciate the good work!
Although, I am having an issue with the date picker i.e. when user uses datepicker's navigation buttons for changing year or month, some of the times they do not respond well.

This issue is occuring on majority of browsers including IE9, FF and Chrome although its intermittent.

Findings: When user clicks on a "Prev-Month" button, I have noticed that few events/handlers are triggered : mousedown, updateTable and click handler in the same order. When the navigation does not respond in that case I observed that only click handler was getting invoked.

Any idea....?

Update: This is happening library is not able to bind the events to the control when control has any special character in its "id" attribute.

Hi, MIT licensing requires that a copy of the license be included with the software. Could you please add one? Thanks!

Pressing the reset button/input of a form should call the datePickers "change" event.

Is it possible to include inputs with type="number" as allowable fields to bind the date picker too?

Our use-case is HTML5 based content where a date is being collected with the day and year fields as inputs with type number for keyboard selection on mobile devices, rather than the default text keyboard.

don't force all code into strict mode

I will try to understand why but if you select 21th october the calendar picks the 20th and overwrite the calendar.

Marco

iOS 8, safari & chrome both require two touches to set the date, which feels very unresponsive

When a date such as 7/10/14 is entered into a textbox, datePicker changes it to 7-10-2014 in Chrome but changes it to 7-10-1914 in IE 11 and Firefox

The use of /*@cc_on …. @*/ syntax causes some nasty gotchas with the AMD pattern, and specifically the text plugin, as this is non-standard syntax for ECMAScript.

Is it feasible to use feature detection over conditional compilation?

The error that I have on Safari 6.0.5 desktop and iOS 7 mobile Safari :

TypeError: Attempted to assign to readonly property. on line 144.
No error in Chrome or Safari on the same thing.

In internet explorer 11, when the datepicker closes (cssAnimation is enabled) the transactionEnd event does not fire (o.transEnd is not called).

Would expect the same close behaviour as on desktop browsers

In "Setting status bar messages dynamically" it says

datepickerController.setBespokeTitles("inp1", {
  ...
});

but it should be

datePickerController.setBespokeTitles("inp1", {
  ...
});

(uppercase P in datePicker)

I was curious where the documentation is for Datepicker.js. I saw that you have a blog link at the bottom pointing to "http://www.frequency-decoder.com/" however it appears to be down. I am trying to set the date of the calendar to January 1, 2014. I don't want it to load on today's date.

After you use the popup to set the date, the focus is given back to the form input, which shows the keyboard on most touch devices. This creates an unexpected & jarring user experience

Once selecting a date the datepicker visually disappears, but is still clickable and obscures the rest of the interface. Android stock browser on Samsung Galaxy running Android 4.X

If I set the format to %d-%m-%Y and type 01-04-2001 or 01 04 2001, the date stays/is converted to 01-04-2001.
However, if I type 01 04 01 or 01-04-01, the format is changed to %m-d%-%Y and I end up with 04-01-2001

Hi there,

wonderful work!

I wonder if there's a way to set disabled or enabled days of a second datepicker on firing an onselect event of a first datepicker. I'm coding sort of a booking form with datepickers for start and end of the booking request. Already booked dates are disabled by using setDisabledDates. The idea is to set all dates of the end date picker to disabled at first page load and enable dates dependend on the selection in the first datepicker. Otherwise users can select end dates past to the next booked out period...

Any idea?

thx in advance // nielo

I'm getting the following error in IE8 when I click on the next or previous buttons of the date picker.

Unable to get property 'target' of undefined or null reference

This relates to the following part of the library:

this.onclick = function(e) {
if((!cssAnimations && o.opacity != o.opacityTo) || o.disabled || e.target.className.indexOf('not-available') != -1) {
return stopEvent(e);
};

I want the datepicker to pop up as soon as the text box gets focus or is clicked. Could you please let me know? I have gone through the js file and tried several settings. Nothing seems to work. TIA

Lines 589 and 590 cause errors in IE8 due to use of console.log

Hi @freqdec,

With the last version of the chrome, version 38, the script throws this error when initialize a DatePicker.

Uncaught TypeError: Cannot assign to read only property 'defaultVal' of %d/%m/%Y

Greatings-

Looking to get a way to contact you to license.

Thanks.

I'm trying to create a datePicker calendar instance based on a dynamic element ID from a jQuery cloned table row. $clTRow is the cloned row:
$clTRow.find("a").each(function(){
var orig = (this.id.match(/\d+$/) || [0])[0];
var num = +(this.id.match(/\d+$/) || [0])[0] + 1;
var inputName = "sf215Date_" + orig + "" + num;
var inputTitle = "SF215 Date " + orig + "" + num;

                this.id = this.id.replace(/\d+$/, "") + orig + "_" +num ;
                this.href = this.href.replace(this.href, "") +  "#" + $clTRow.find('input[id^="sf215Date_"]').attr('id');
                this.title = this.title.replace(this.title, "") + inputTitle;

/*when I try to create the option string dynamicly it places quotes around the string which I believe invaidates it. */
var opts = '{formElements:{'+ inputName + ': "m-sl-d-sl-Y"},calendarIconTitle :' + inputTitle + '};';

/* if I put the variable name in it takes it as a string literal */
var opts = {formElements:{inputName : "m-sl-d-sl-Y"},calendarIconTitle :inputTitle };

/* if I use eval() around the var name, it tells me that I'm missing a semi colon*/
var opts = {formElements:{eval("inputName") : "m-sl-d-sl-Y"},calendarIconTitle :eval ("inputTitle")};

datePickerController.createDatePicker(opts);

            });

Is there any way to pass in a dynamicly generated ID and Title.?

Hi man,
thanks for this datepicker.
I want use it but i see in you demo.
http://freqdec.github.io/datePicker/demo/

the value of top in chrome are not good.
Its flagrant in demo 8.
it really looks like the datepicker does not appear he is just too high in the page

can you help me?

thanks

Currently the CSS file asks developers to find/replace the URL path to the media directory.

Can this just be ../media/ in the CSS file as supplied?

This also avoids upgrades wiping the fixed URLs.

-- Tim.

On IE11, after datePicker popup is shown and then hidden (by clicking elsewhere), the hidden popup is still active even though it is invisible. It still controls the cursor and still flashes messages as the cursor moves over (invisible) dates. Controls that are "under" the hidden datePicker are inaccessible.
The problem occurs on Internet Explorer 11. I have tried it on Firefox, Chrome and Safari and they do not exhibit the problem.

Windows 7 64bit
IE 11.0.9600.17420

Hi,

Is it possible to select multiple dates?
So instead of a SelectedDate property you would have a list of selected dates.
Would this be hard to implement? If not, can you point me in a direction?

Thanks!

Arne

This is bad UI in general as the hovered-over date appears to be the selected date when in fact it is not. You could easily just swap the visual styles of selected vs hover to resolve this.

I have found that when using IE10, the user is only able to open the calendar but cannot navigate via keyboard. I was able to reproduce the same issue on the plugin examples. Is this a known issue?

Hello,

Can you add a option to create a timePicker (just two input element under the table) with the datePicker ?

Thank you.

The status bar shows the date the mouse was last hovered over, not the chosen date, even after the mouse has moved off the control. This makes the status bar effectively useless if one does not want to greatly confuse users.

Would it be possible for you to create a http://bower.io/ registry and package for this library I find it useful and it would be cool to import via bower into a SPA.

Thanks,

Is there a way that we can bind this datapicker to Angulajs?

The link to the language file creator is broken. It appears that the file has been completely removed from the gh-pages.

I'd like to propose the following (happy to develop this if you are happy?):

• deriveLocale should be completely optional (an option that you can pass into createDatePicker), if set to false - then no attempt is made to load a file from lang/
• It should be possible to specify the location of lang files, if not located in the same location as datePicker itself.

This makes the previous issue even worse because now the mouse is nowhere near the control and the most prominent highlight has nothing to do with the actual selected date.

Control works fine in Chrome, I can tab in, hit ENTER to open the control, move around with arrows and select a date with ENTER. Attempt exactly the same behaviour with NVDA running and I can open with ENTER but the arrow keys don't work, I can't select a date.

Obviously, this is a critical issue.

I'm guessing NVDA is intercepting the arrow keys for navigation on the page. Looking in to how to fix this, if anyone has any suggestions feel free to weigh in.

I am using datePicker v4.4and having trouble in disabling present date and dates after 7days from today. here's the link of my work. please help

Hello. I'd be grateful if you could add a package.json file so that your datePicker could be used as an NPM dependency .

First of all, I am using version 5.4 because 6.2 doesn't auto format at all. But with 5.4, certain date ranges won't auto format, such as the following:

January 1-29
Any month, days 1-2
So, if I enter 1302012, it will format to 01/30/2012 but if I enter 1292012, it will stay 1292012. For the rest of the months, if I enter 212012 it will stay that way, but if I enter, 232012, it will format to 02/03/2012.

I am using JQuery 1.8.2

Thanks