Using jquery datepicker for change month and change year. While testing for accessibility, the tab is not working for the calendar, as in the calendar pops up on using tab, but after that it goes to the next field on using tab again.
Instead it should go to Previous button then Month Dropdown then year dropdown then Next button then all the dates.
Please share any solution if possible.
When the datepicker displays you'd have to get the UI element and change the tabindex properties of the child buttons accordingly.
edit This is actually more difficult, because you have to mess with the onfocus/onblur events as well.
The HTML5 DATE works with tabbing.
<input type="date" />
Related
i have 3 datebox fields one under another. When i open first calendar, its SET DATE button comes over the 3rd field. So when i tap on the SET DATE it also gets click on the 3rd field and its calendar opens up...
Right now i am doing this, but its not a good idea and also doesn't works in all browsers
if(passed.method === 'close'){ // If first field calendar close
setTimeout(function(){
$(3rd field calendar).datebox('enable');
$(3rd field calendar).blur();
$(3rd field calendar).datebox('close');
}, 500);
}
Kindly suggest
I'm using the jQuery UI datepicker and the tooltip function from the same collection. Both work perfectly for my application. Except where they both try to work. When I hover on the icons for previous or next months, I get a tooltip popping up that says "Prev" or "Next". When I click on the previous-month icon the tooltip stays visible, completely covering the month and year headline. (On the next-month icon it stays visible but it doesn't interfere. Much.)
The function of these icons is absolutely clear without the tooltip, and badly broken with it, but I can't figure out a way to disable the title="Prev" and title="Next" code.
I actually don't need tooltips anywhere in the datepicker because I'm using it strictly to set a date rather than display events in the calendar.
The solution is to be more specific in the "tooltip" selector.
I changed from:
$(document).tooltip();
to:
$("span.ui-icon").tooltip();
And it work for me now.
After initializing my datepickers I use:
$('.ui-datepicker-trigger').prop('title','');
You can add option for datepicker():
$(".datepicker").datepicker({
hideIfNoPrevNext: true,
minDate: "-2Y"
});
I can't seem to figure out why the initial state of my UI doesn't have the first radio button in the 'checked' state. Here's a jsFiddle: http://jsfiddle.net/floyd_may/JcTxT/
However, this jsFiddle here works just fine, even if you modify it to change it to radio inputs (instead of checkbox): http://jsfiddle.net/rniemeyer/EGAH9/
You'd start thinking that perhaps jQuery Mobile has a part to play in all this; however, this version of my original fiddle has the jQuery Mobile portions cut out, and still doesn't work: http://jsfiddle.net/floyd_may/JcTxT/5/
Why isn't the 'child 1' radio button initially appearing checked?
Rearranging the order of bindings did it: http://jsfiddle.net/JcTxT/6/
value: name, checked: $root.selectedName instead of
checked: $root.selectedName, value: name
I have a date field on a PHP website and I'm using jQuery Mobile for mobile site.
While browsing the site on a mobile browser, (eg firefox mobile on android), on clicking on the date text input, the calendar dialog comes up, but the soft keyboard also comes up on my android (Soft keypad comes up whenever one focuses on a input field)
Is there a way, I can force hide the soft keyboard ? Is there a generic javascript based trick to force hide the soft keypad (that works on all mobile devices like iphone, android etc ?
I'm using the jQuery Mobile datepicker from here
TIA
A more simple solution is to add readonly="true" to the input boxes that you have the datepicker attached to. Even though you can't manually type in a date, on mobile you won't have to deal with the keyboard popping up and getting in the way
Just found an answer to my question. (Guess I didn't search with the right keywords earlier :-|)
Adding a jQuery blur event on focus solves the issue.
Thanks to this post by Danny C
My workaround (though I am using a different plugin: the datebox from jtsage.com) is currently the following:
set a disabled attribute on the input
bind a click handler to the input or its parent
the click handler triggers .datebox('open') on the selected element
This way there is no focus element so no triggering of Android soft keyboard.
add the readonly attribute to your date box. (or readonly="readonly") input type="text" data-role="date" readonly
For JQM add the folloiwing files jqm.datepicker.css , jqm.datepicker.theme.css , jqueryUI.js , jqm.datepicker.js
I have a calendar which is meant to look much like the calendar in Outlook. There is a big field representing the hours in a day, and there is a date navigator. The navigator is the jQuery UI Datepicker.
I want users to be able to navigate to a new day by clicking on a date in the datepicker, but also to be able to drag appointments over the datepicker and drop them on a specific date. I have that working now.
I also want users, while they are dragging an appointment, to be able to move to next or previous month simply by hovering over the datepicker. So I've added a mouseenter and mouseleave event: one runs a setInterval function which sends a click every 1,5 seconds; the other cancels the interval function.
This is where all sorts of things go wrong. As soon as one click has been triggered, the mouseleave function no longer works: in other words, the datepicker keeps flipping over to another month every 1,5 seconds.
It seems that the datePicker interferes, or that the click event causes other things to go wrong. What can I do?
It sounds like your event listeners are been overwritten by the jQuery-UI Datepicker states. It you look at the source of the date picker, every time it changes state it re-declares its event listeners. Thats all I can say without looking at your source.
Post your source and I'll try to fix it for you. It may be necessary to monkey patch the Datepicker.