only - Deshabilitar la configuración de enfoque para jQuery UI datepicker

jquery ui only datepicker

Question

Hay una opción con el selector de fecha jQuery UI para abrir solo el selector de fecha cuando se hace clic en la imagen de un botón. Vea lo siguiente para un ejemplo:

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

El problema es que el foco está en el campo de texto tan pronto como se abre el selector de fecha. ¿Es posible desactivar la configuración del enfoque?

Cuando se utiliza una página como la anterior en un dispositivo móvil como un iPhone, el teclado aparece porque el campo de texto se enfoca. Esto no es realmente fácil de usar ya que tienes que cerrar el teclado para llegar al selector de fecha y usarlo ...

Answer 1

Encontré una solución al deshabilitar el campo de entrada con jQuery antes de abrir el selector de fecha y habilitarlo después de 100 ms:

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

Probado en Chrome y también con Córdoba en Android 5.1.1.

Answer 2

Experimenté lo mismo donde aparecen los teclados / teclados antes de poder elegir una fecha mientras pruebo en dispositivos móviles. Acabo de agregar un atributo readonly = "true" dentro

Sin embargo, asegúrese de editar CSS y especifique el cursor: puntero porque muestra un signo de interrogación cada vez que se desplaza en la vista de escritorio.

Answer 3

He estado experimentando el mismo problema en una aplicación en la que estoy trabajando. Comenté estas líneas de mi archivo jQuery para evitar que se centre automáticamente en el campo de texto inmediatamente después de hacer clic en el icono de mi calendario. Funcionó para mi aplicación.

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

Answer 4

Logró el resultado deseado al configurar la opción showOn de datepicker en "ninguno".

$(#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 );
    }
});

La implementación del selector de fecha entiende los valores "foco", "botón" y "ambos" para la opción showOn. El valor predeterminado es "enfocar". Así que técnicamente pasa cualquier valor distinto de estos 3 que debería funcionar. Sin embargo, una advertencia: una vez que se invalida la funcionalidad predeterminada, la responsabilidad de administrar la visualización adecuada del calendario del selector de fechas recae en usted.

Answer 5

Si haces que la entrada esté deshabilitada, el teclado nunca aparecerá. Me gusta...

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

Answer 6

Tuve la versión minified v1.11.4 y en jquery-ui.min.js encontré dos veces

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

&&t.input.focus() y funciona bien.

También de interés podría ser:

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

Sigo buscando una solución sin cambiar los archivos principales ...

Answer 7

establecer la entrada a ReadOnly

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

Answer 8

Si está usando jQuery Mobile, entonces probablemente querrá ver algunos de los selectores de fechas orientados a dispositivos móviles que existen. Estoy usando el selector de fecha móvil jQueryUI experimental (de alfa 4) después de probar varios de los otros porque queríamos una buena vista de calendario. Básicamente, solo agrega algunas clases de css agregadas sobre el selector de fecha existente. Estoy usando la versión Edited , así que funciona como una ventana emergente. Para evitar que se abra el teclado, simplemente agrego un evento jQuery blur $this.blur() justo después de que reciba el foco antes de que se muestre el selector. El evento de desenfoque ocurre lo suficientemente rápido como para que el teclado nunca se abra.

Si no , probablemente querrás hacer lo mismo. Sin embargo, no conozco una forma de hacerlo sin editar el código.

Answer 9

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