Jquery UI date picker loses focus when selecting a date. Are there any alternatives to this?
If not, how do I achieve the standard web bevaviour of user entering data into the input field and not losing focus while doing so.
I ended up using onselect function of the date picker
Related
The docs doesn't mention this, but does anyone know if it's possible to only show the DatePicker on icon click (or button), and not when the input field receives focus?
Users will primarily enter dates using the keyboard and doesn't want the DatePicker displayed, unless specifically asked for.
You can have a look here for the complete API which has some options that are not documented on the AntDesign site. But there is no option to achieve what you are looking for.
You need the combination of a text input with a button to popup the picker, which is a different paradigm from the one <DatePicker> uses. It could be "hacked" by combining a normal <Input>, <DatePicker> with custom CSS that only shows the button, and some Javascript event handlers.
I'm looking for suggestions on how to make the jQuery UI Autocomplete suggestions read out in a screen reader as the user is arrowing through them. I notice that the textbox itself doesn't lose focus, so the reader simply reads it's contents over and over. Based on my requirements, I cannot have the textbox value change when a suggestion is arrow'd to.
Thanks very much in advance!
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" />
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 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