jQuery selector de fechas con el texto de entrada que no permite la entrada del usuario

Question

¿Cómo se utiliza el selector de fechas jQuery con una entrada de texto:

$("#my_txtbox").datepicker({ 
    // options 
}); 

que no permite al usuario introducir texto al azar en el cuadro de texto. Quiero que aparezca el Datepicker cuando el cuadro de texto se enfoca o el usuario hace clic en él, pero quiero que el cuadro de texto ignore cualquier entrada del usuario usando el teclado (copie & paste, o cualquier otro). Quiero llenar el cuadro de texto exclusivamente desde el calendario de Datepicker.

¿Esto es posible?

jQuery 1.2.6
selector de fechas 1.5.2

Answer 1

Usted debe ser capaz de utilizar el atributo de sólo lectura en la entrada de texto, y jQuery todavía será capaz de editar su contenido.

<input type='text' id='foo' readonly='true'> 

Answer 2

Para planificador de evento popup sobre la ganancia de enfoque:

$(".selector").datepicker({ showOn: 'both' }) 

Si no desea que la entrada del usuario, añadir esto al campo de entrada

<input type="text" name="date" readonly="readonly" /> 

Answer 3

tratar

$("#my_txtbox").keypress(function(event) {event.preventDefault();}); 

Answer 4

Este demo tipo de t sombrero colocando el calendario sobre el campo de texto para que no pueda escribirlo. También puede configurar el campo de entrada para que solo lea en el HTML para estar seguro.

<input type="text" readonly="true" /> 

Answer 5

He encontrado que el complemento de jQuery Calendar, en mi opinión, al menos, en general, funciona mejor para seleccionar las fechas.

Answer 6

Si va a reutilizar el selector de fechas en múltiples lugares, entonces sería conveniente modificar el cuadro de texto también a través de JavaScript utilizando algo como:

$("#my_txtbox").attr('readOnly' , 'true'); 

justo después/antes de que el lugar en el que hace funcionar su planificador de evento .

Answer 7

<input type="text" readonly="true" /> 

hace que el cuadro de texto pierda su valor después de la devolución.

Debería utilizar la sugerencia de Brad8118 que funciona perfectamente.

$("#my_txtbox").keypress(function(event) {event.preventDefault();}); 

EDIT: para conseguir que funcione para IE utilizar 'keyDown' en lugar de 'pulsación de tecla'

Answer 8

Basado en mi experiencia yo recomendaría la solución sugerida por Adhip Gupta:

$("#my_txtbox").attr('readOnly' , 'true'); 

El siguiente código no permitirá que el usuario escriba caracteres nuevos, pero le permitirá borrar caracteres:

$("#my_txtbox").keypress(function(event) {event.preventDefault();}); 

Además, este hará que la forma inútil para aquellos que tienen JavaScript desactivado:

<input type="text" readonly="true" /> 

Answer 9

O usted podría, por ejemplo, utilizar un campo oculto para almacenar el valor ...

 <asp:HiddenField ID="hfDay" runat="server" /> 

.

y en los $ ("# my_txtbox") datepicker ({opciones:

 onSelect: function (dateText, inst) { 
      $("#<% =hfDay.ClientID %>").val(dateText); 
     } 

Answer 10

Si desea que el usuario seleccione una fecha en el selector de fechas b ut usted no desea que el usuario escriba en el cuadro de texto a continuación, utilizar el siguiente código:

<script type="text/javascript"> 
$(function() { 
    $("#datepicker").datepicker({ maxDate: "-1D" }).attr('readonly', 'readonly'); 
    $("#datepicker").readonlyDatepicker(true); 

}); 

Answer 11

$('.date').each(function (e) { 
    if ($(this).attr('disabled') != 'disabled') { 
     $(this).attr('readOnly', 'true'); 
     $(this).css('cursor', 'pointer'); 
     $(this).css('color', '#5f5f5f'); 
    } 
}); 

Answer 12

Usted tiene dos opciones para hacer esto. (Por lo que yo sé)

1. Opción A: Haga su campo de texto de sólo lectura. Se puede hacer de la siguiente manera.

2. Opción B: Cambiar el cursor onfocus. Establecer ti para desenfocar. se puede hacer configurando el atributo onfocus="this.blur()" en el campo de texto del selector de fecha.

Ex: <input type="text" name="currentDate" id="currentDate" onfocus="this.blur()" readonly/>

Answer 13

HTML

<input class="date-input" type="text" readonly="readonly" /> 

CSS

.date-input { 
     background-color: white; 
     cursor: pointer; 
} 

Answer 14

Aquí está su respuesta w Que es la forma de resolverlo. No quiere usar jquery cuando restringió la entrada del usuario en el control de la caja de texto.

<input type="text" id="my_txtbox" readonly /> <!--HTML5--> 

<input type="text" id="my_txtbox" readonly="true"/> 

Answer 15

$("#txtfromdate").datepicker({   
    numberOfMonths: 2, 
    maxDate: 0,    
    dateFormat: 'dd-M-yy'  
}).attr('readonly', 'readonly'); 

añadir el atributo de sólo lectura en el jQuery.

Answer 16

$ ("# my_txtbox").prop ('sólo lectura', true)

trabajó como un encanto ..

Answer 17

En lugar de utilizar el botón de texto se puede utilizar también. Funciona mejor para mí, donde no quiero que los usuarios escriban la fecha manualmente.

Answer 18

Después de inicializar el selector de fechas:

 $(".project-date").datepicker({ 
      dateFormat: 'd M yy' 
     }); 

     $(".project-date").keydown(false); 

Answer 19

me encontré con esto, así que estoy compartiendo aquí. Aquí está la opción

https://eonasdan.github.io/bootstrap-datetimepicker/Options/#ignorereadonly

Aquí está el código.

HTML

<br/> 
<!-- padding for jsfiddle --> 
<div class="input-group date" id="arrival_date_div"> 
    <input type="text" class="form-control" id="arrival_date" name="arrival_date" required readonly="readonly" /> 
    <span class="input-group-addon"> 
    <span class="glyphicon-calendar glyphicon"></span> 
    </span> 
</div> 

JS

$('#arrival_date_div').datetimepicker({ 
    format: "YYYY-MM-DD", 
    ignoreReadonly: true 
}); 

Aquí es el violín:

http://jsfiddle.net/matbaric/wh1cb6cy/

Mi versión de arranque-datet imepicker.js es 4.17.45

Answer 20

Sé que esta pregunta ya está respondida, y la mayoría sugirió utilizar readonly attribure.
Solo quiero compartir mi escenario y respuesta.

Después de añadir readonly atributo a mi elemento HTML, enfrenté tema que no soy capaz de hacer este atributo como required dinámicamente.
Incluso intenté la configuración como readonly y required en la hora de creación de HTML.

Así que voy a sugerir no utilice readonly si quieres configurarlo como required también.

en lugar de utilizar

$("#my_txtbox").datepicker({ 
    // options 
}); 

$("#my_txtbox").keypress(function(event) { 
    return ((event.keyCode || event.which) === 9 ? true : false); 
}); 

Esto permite presionar solamente tab clave.
Puede agregar más códigos de clave que desea eludir.

I siguiente código desde que han añadido tanto readonly y required todavía envía el formulario.
Después de eliminar readonly funciona correctamente.

https://jsfiddle.net/shantaram/hd9o7eor/

$(function() { 
 
    $('#id-checkbox').change(function(){ 
 
    \t $('#id-input3').prop('required', $(this).is(':checked')); 
 
    }); 
 
    $('#id-input3').datepicker(); 
 
    $("#id-input3").keypress(function(event) { 
 
    return ((event.keyCode || event.which) === 9 ? true : false); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet"/> 
 

 
<form action='https://jsfiddle.net/'> 
 
Name: <input type="text" name='xyz' id='id-input3' readonly='true' required='true'> 
 
    <input type='checkbox' id='id-checkbox'> Required <br> 
 
    <br> 
 
    <input type='submit' value='Submit'> 
 
</form>

Answer 21

sustituir el ID del selector de hora: IDofDatetimePicker a su identificación.

Esto evitará que el usuario ingrese más entradas de teclado, pero aún así, el usuario podrá acceder a la ventana emergente de tiempo.

$ ("# my_txtbox"). Keypress (function (event) {event.preventDefault();});

probar este fuente: https://github.com/jonthornton/jquery-timepicker/issues/109