¿Cómo deshabilitar la entrada manual para el campo JQuery UI Datepicker? [duplicate]

2 minutos de lectura

avatar de usuario
abejaperro

Decidí usar el script JQuery UI Datepicker para seleccionar fechas. A continuación se muestra parte de mi código y la forma en que lo integré en mi página PHP:

<link type="text/css" href="https://stackoverflow.com/questions/4164542/css/south-street/jquery-ui-1.8.6.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript">
$(function(){
    // Datepicker
    $('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' });
    //hover states on the static widgets
    $('#dialog_link, ul#icons li').hover(
        function() { $(this).addClass('ui-state-hover'); }, 
        function() { $(this).removeClass('ui-state-hover'); }
    );
});
</script>

Y:

    // date picker (embeds JQuery script)
echo '<label for="datepicker">Date: </label>';
echo '<input type="text" name="datepicker" id="datepicker" />';
echo '<div id="datepicker"></div>';

Más o menos de acuerdo con las instrucciones de la interfaz de usuario de JQuery.

Ahora mi pregunta es: ¿Cómo puedo deshabilitar las entradas manuales en el campo de entrada de texto?? Solo quiero que el script JQuery Datepicker pueda llenar el campo de texto. Por lo que puedo ver, la secuencia de comandos actualmente evita que el usuario ingrese caracteres no numéricos en el campo de texto, pero se permite cualquier combinación de números (por lo tanto, se permiten galimatías como “95460829468”).

Cuando realice la entrada, configúrela para que sea de solo lectura.

<input type="text" name="datepicker" id="datepicker" readonly="readonly" />

  • Solución asombrosamente simple. Parece estar funcionando tal como se esperaba, ¡muchas gracias!

    – BeeDog

    12 de noviembre de 2010 a las 12:34

  • Si agrega ‘color de fondo: #fff! importante; cursor: texto !importante;’ se verá totalmente normal…

    – s.alem

    5 de agosto de 2014 a las 12:51

  • Usaría un puntero de cursor para que parezca que se puede hacer clic <input ... readonly="readonly" style="cursor:pointer; background-color: #FFFFFF">

    – E Ciotti

    18 de agosto de 2014 a las 12:27

  • Esto también funciona en una página MVC con el nuevo { @readonly=”readonly” }

    – Dean.DePue

    9 de septiembre de 2014 a las 13:11

  • Esta solución no me deja borrar la fecha seleccionada.

    – Anders Linden

    06/10/2016 a las 11:26

Creo que deberías agregar
estilo=”fondo:blanco;”
hacer que parezca que se puede escribir

<input type="text" size="23" name="dateMonthly" id="dateMonthly" readonly="readonly"   style="background:white;"/>

  • 1. Copie la respuesta 2. Agregue un nuevo atributo (creo que debería agregar style=”background:white;” para que parezca que se puede escribir y “cursor: pointer” para que parezca que se puede hacer clic) 3. ?????? ? 4. Beneficio

    – Skmasq

    4 de julio de 2016 a las 16:33

  • Para ser justos, la sugerencia de CSS fue bastante útil para que la entrada no apareciera deshabilitada.

    – Hartley Brody

    31 de julio de 2019 a las 23:18

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad