Отключить настройку фокуса для jQuery UI datepicker

Есть опция с jQuery UI datepicker, чтобы открывать датупиксера при нажатии на изображение кнопки. Для примера см. Ниже:

http://jqueryui.com/demos/datepicker/#icon-trigger

Проблема заключается в том, что фокус находится в текстовом поле, как только откроется datepicker. Можно ли отключить настройку фокуса?

При использовании такой страницы, как указано выше, на мобильном устройстве, таком как iPhone, клавиатура появляется, потому что текстовое поле получает фокус. Это не очень удобно, так как вам нужно закрыть клавиатуру, чтобы на самом деле добраться до datepicker и использовать ее...

Ответ 1

установите значение ReadOnly

<input type="text" id="datePicker" readonly>

Ответ 2

Если вы используете jQuery Mobile -, то вы, вероятно, захотите проверить некоторых мобильных пикетов, ориентированных на мобильные устройства. Я использую экспериментальный jQueryUI mobile datepicker (из альфа-4), попробовав несколько других, потому что нам нужен хороший просмотр календаря. В основном это добавляет несколько классов CSS, добавленных поверх существующего datepicker. Я использую Edited, поэтому он работает как всплывающее окно. Чтобы предотвратить открытие клавиатуры, я просто добавляю событие размытия jQuery $this.blur() сразу после получения фокуса до того, как будет отображен выборщик. Событие размытия происходит достаточно быстро, что клавиатура никогда не открывается.

Если не - вы, вероятно, захотите сделать то же самое. Я не знаю, как это сделать, не редактируя код.

Ответ 3

Если вы отключите вход, клавиатура никогда не появится. Как...

    <input type="text" id="date_picker_field" name="date" disabled/>

Ответ 4

Я испытываю ту же проблему в приложении, над которым я работаю. Я прокомментировал эти строки из моего файла jQuery, чтобы предотвратить автоматическую установку фокуса на текстовое поле сразу после нажатия на значок календаря. Он работал для моего приложения.

if ( $.datepicker._shouldFocusInput( inst ) ) {
    inst.input.focus();
}

Ответ 5

Я испытал то же самое, что клавиатура/клавиатура появляется, прежде чем я смогу выбрать дату во время тестирования на мобильных устройствах. Я просто добавил атрибут readonly = "true" внутри

Однако не забудьте отредактировать CSS и указать указатель курсора: указатель, потому что он показывает знак вопроса каждый раз, когда вы наводите вид на рабочем столе.

Ответ 6

У меня была мини-версия v1.11.4, а в jquery-ui.min.js я нашел два раза

datepicker._shouldFocusInput(t)&&t.input.focus()

Я удалил &&t.input.focus(), и он отлично работает.

Также интерес может быть:

_shouldFocusInput:function(e){
  return e.input&&e.input.is(":visible")&&!e.input.is(":disabled")&&!e.input.is(":focus")
}

Ищем исправление без изменения файлов ядра...

Ответ 7

Я нашел обходное решение, отключив поле ввода с помощью jQuery перед тем, как открыть datepicker и включить его после 100 мс:

$selected = $("#datepickerInput");
$selected.prop('disabled', true);
$selected.datepicker("show");
window.setTimeout(function () {
   $selected.prop('disabled', false);
}, 100);

Протестировано на Chrome, а также с cordova на Android 5.1.1.

Ответ 8

Достигнут желаемый результат, установив для параметра datepicker showOn значение "none".

$(#startdate").datepicker({
    defaultDate : "+7d",
    minDate: "+7d",
    changeMonth : true,
    changeYear : true,
    yearRange : "c:c+1",
    numberOfMonths : 1,
    showOn: "none",
    dateFormat : "dd-MM-yy",
    onClose : function(selectedDate) {
        $("#startdate").val(selectedDate);
        $( "#enddate" ).datepicker( "option", "minDate", selectedDate );
    }
});

Реализация датпикера понимает значения "focus", "button" и "both" для опции showOn. По умолчанию установлено значение "focus". Таким образом, техническая передача любой ценности, отличной от этих 3, должна работать. Слово осторожности, хотя, как только функция по умолчанию переопределена, на вас лежит ответственность за правильное отображение календаря выбора даты.

Ответ 9

$('#dateIniPick').datetimepicker({
    format: 'DD/MM/YYYY',
    ignoreReadonly: true,
    allowInputToggle: true
});