Подтвердить что ты не робот

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?

4b9b3361

ОТВЕТЫ

Ответ 1

Это не настраивается с помощью datepicker. Вам нужно будет изменить способ _doKeyDown здесь.

Самый простой способ сделать это - расширить виджет. Он будет выглядеть примерно так:

$.extend($.datepicker, {
     _doKeyDown: function(event){
           //copy original source here with different
           //values and conditions in the switch statement
     }
});

Ответ 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, прежде чем перезаписать ее и вызвать ее для всех других ярлыков.