JQuery DatePicker ReadOnly

Cuando hago que mi selector de fecha es de solo lectura, veo que el usuario no puede escribir nada en el cuadro de texto.

$("#datepicker").attr('readonly', 'readonly'); 

Sin embargo, todavía pueden cambiar el valor utilizando el calendario. ¿Cómo puedo ocultar el calendario para que los usuarios no puedan cambiar el valor de la fecha?

No deseo deshabilitar el datepicker ya que necesito el valor publicado en el servidor al enviar el formulario.

("#datepicker").datepicker('disable');

Puede establecer el rango permitido en un rango no válido para que el usuario no pueda seleccionar ninguna fecha:

 $("#datepicker").datepicker({minDate:-1,maxDate:-2}).attr('readonly','readonly'); 

Configuré lo siguiente antes del controlador de eventos ShowShow (en el parámetro opciones) para lograr esta funcionalidad.

 beforeShow: function(i) { if ($(i).attr('readonly')) { return false; } } 

Mi solución final:

Cuando se carga mi aplicación, inicializo el datepicker como tal:

 $('.selector').datepicker({ dateFormat: "mm/dd/yy" }); 

Luego tengo un botón de alternar global que habilita / deshabilita el selector de fecha. Para deshabilitarlo hago lo siguiente:

 $('.selector').datepicker("option", "minDate", -1); $('.selector').datepicker("option", "maxDate", -2); 

Para habilitarlo hago lo siguiente:

 $('.selector').datepicker("option", "minDate", null); $('.selector').datepicker("option", "maxDate", null); 

¡Gracias a todos!

Si está intentando deshabilitar el campo (sin deshabilitarlo realmente), intente configurar el evento this.blur(); en this.blur(); . De esta manera, cada vez que el campo se enfoca, lo pierde automáticamente.

Todas las soluciones enumeradas brindan una experiencia de usuario mediocre o causan problemas si desea volver a habilitar el selector de fecha con su configuración intacta. Utilicé un método similar a hacer una selección de solo lectura, que es deshabilitarlo pero agregar un campo oculto con el mismo nombre. Revisalo:

Uso:

 $("#datepicker").readonlyDatepicker(true); //makes the datepicker readonly $("#datepicker").readonlyDatepicker(false); //makes the datepicker editable again 

Función jQuery:

 $.fn.readonlyDatepicker = function (makeReadonly) { $(this).each(function(){ //find corresponding hidden field var name = $(this).attr('name'); var $hidden = $('input[name="' + name + '"][type="hidden"]'); //if it doesn't exist, create it if ($hidden.length === 0){ $hidden = $(''); $hidden.insertAfter($(this)); } if (makeReadonly){ $hidden.val($(this).val()); $(this).unbind('change.readonly'); $(this).attr('disabled', true); } else{ $(this).bind('change.readonly', function(){ $hidden.val($(this).val()); }); $(this).attr('disabled', false); } }); }; 

Lo siento, pero la solución de Eduardos no funcionó para mí. Al final, me di cuenta de que el datepicker desactivado es solo un cuadro de texto de solo lectura. Así que debes hacerlo de solo lectura y destruir el datepicker. El campo será enviado al servidor una vez enviado.

Aquí hay un código poco generalizado que toma múltiples cuadros de texto y los hace de solo lectura. También eliminará a los recolectores de fechas.

 fields.attr("readonly", "readonly"); fields.each(function(idx, fld) { if($(fld).hasClass('hasDatepicker')) { $(fld).datepicker("destroy"); } }); 

onkeypress => preventdefault …

Se me ocurrió otra solución diferente a la que se había propuesto. Cuando se usa el selector de fecha, crea una división similar a una ventana emergente que se coloca cuando se hace clic en el campo de entrada. Para eliminarlo, simplemente establezco la propiedad de visibilidad del CSS para que no se muestre.

 if ($('.yourDatepickerSelector').prop('readonly')) { $('#ui-datepicker-div').css({ 'visibility': 'hidden' }) } else { $('#ui-datepicker-div').css({ 'visibility': 'visible' }) } 

Esto también parece publicar correctamente en el servidor y no debería afectar a ninguna de las configuraciones asociadas con él.

  

Funciona para mi.

  beforeShow: function(el) { if ( el.getAttribute("readonly") !== null ) { if ( (el.value == null) || (el.value == '') ) { $(el).datepicker( "option", "minDate", +1 ); $(el).datepicker( "option", "maxDate", -1 ); } else { $(el).datepicker( "option", "minDate", el.value ); $(el).datepicker( "option", "maxDate", el.value ); } } }, 
 Readonly datepicker with example (jquery) - In following example you can not open calendar popup. Check following code see normal and readonly datepicker. Html Code- 
     jQuery UI Datepicker functionality         

Readonly DatePicker:

Normal DatePicker: