JQuery UI datepicker: настройка сочетаний клавиш
Я использую jQuery UI datepicker, чтобы пользователь мог выбрать дату. У него есть несколько ярлыков, чтобы его можно было контролировать с помощью клавиатуры:
page up/down - previous/next month
ctrl+page up/down - previous/next year
ctrl+home - current month or open when closed
ctrl+left/right - previous/next day
ctrl+up/down - previous/next week
enter - accept the selected date
ctrl+end - close and erase the date
escape - close the datepicker without selection
Но мне кажется, что это не удобно для меня. Я не узнал, как выбрать дату с клавиатурой, пока не прочитаю ее в документации. Я думаю, только немногие пользователи узнают, что им нужно нажать "CTRL + стрелки", чтобы выбрать дату.
Поэтому я хотел бы заменить быстрые клавиши на другие. Особенно мне хотелось бы, чтобы пользователю не приходилось нажимать клавишу "Control" при навигации со стрелками между днями и неделями.
Поскольку в документации я не нашел никакой конфигурации, Я попытался достичь этой цели, используя какой-то пользовательский javascript, где я слушаю события клавиатуры и установите дату вручную. Но это приводит от одной проблемы к другой:
- Он работает только после первого выбора даты.
- Это мешает, когда пользователь использует клавиши CTRL + со стрелками после навигации только со стрелками
- Дата в поле ввода немедленно обновляется, в отличие от навигации с помощью клавиш CTRL + со стрелками оригинального управления клавиатурой datepicker.
- Другие ярлыки браузера не работают из-за
event.preventDefault()
Я знаю, что все эти проблемы могут быть решены с помощью дополнительного Javascript снова, но я бы предпочел, чтобы я мог как-то настроить это.
Можно ли настроить ярлыки jQuery UI datepicker?
Ответы
Ответ 1
Это не настраивается с помощью datepicker. Вам нужно будет изменить способ _doKeyDown
здесь.
Самый простой способ сделать это - расширить виджет. Он будет выглядеть примерно так:
$.extend($.datepicker, {
_doKeyDown: function(event){
//copy original source here with different
//values and conditions in the switch statement
}
});
Ответ 2
вы можете проверить это дополнение:
http://hanshillen.github.io/jqtest/#goto_datepicker
для получения дополнительных возможностей.
Ответ 3
Если его a Jquery date picker
, то по умолчанию он будет поддерживать все эти ярлыки. Там может быть один вопрос, т.е. Theme
. Вы можете использовать CSS CDN
, указанный в Jquery
Сайте. Тогда фокус будет виден даже. Это отличный клик для доступности.
Ответ 4
Если вы хотите заменить одну из ярлыков и не хотите копировать код из репозитория в случае обновления библиотеки jquery ui, используйте:
var doKeyDown = $.datepicker._doKeyDown;
$.extend($.datepicker, {
_doKeyDown: function(event){
console.log(event.which);
if(event.which !== $.ui.keyCode.ENTER) {
doKeyDown(event);
}
else {
//do something else
}
}
});
Сохраните ссылку _doKeyDown, прежде чем перезаписать ее и вызвать ее для всех других ярлыков.