libreria - jQuery Datepicker con entrada de texto que no permite la entrada del usuario

libreria ui jquery

Question

¿Cómo uso jQuery Datepicker con una entrada de cuadro de texto?

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

eso no le permite al usuario ingresar texto aleatorio en el cuadro de texto. Quiero que el Datepicker aparezca 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 (copiar y pegar, o cualquier otro). Quiero llenar el cuadro de texto exclusivamente desde el calendario de Datepicker.

es posible?

jQuery 1.2.6
Datepicker 1.5.2

Answer 1

$ ("# my_txtbox"). prop (''readonly'', verdadero)

trabajado como un encanto..

Answer 2

Aquí está su respuesta, 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 3

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

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

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

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

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

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

Answer 4

Debería poder usar el atributo de solo lectura en la entrada de texto, y jQuery aún podrá editar su contenido.

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

Answer 5

Descubrí que el complemento de calendario de jQuery, al menos para mí, en general funciona mejor para seleccionar fechas.

Answer 6

Después de inicializar el selector de fecha:

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

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

Answer 7

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

Answer 8

Este tipo de demo hace eso 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 9

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í está el violín:

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

Mi versión de bootstrap-datetimepicker.js es 4.17.45

Answer 10

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

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

y en $ ("# my_txtbox"). datepicker ({options:

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

Answer 11

Para datepicker para emergente en foco de ganancia:

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

Si no desea la entrada del usuario, agregue esto al campo de entrada

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

Answer 12

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 agregar el atributo readonly a mi Elemento HTML , me enfrenté al problema de que no puedo hacer este atributo como se required forma dinámica.
Incluso intenté configurarlo como readonly y required en el momento de creación de HTML.

Por lo tanto, le sugiero que no lo use de forma readonly si también desea configurarlo como se required .

En su lugar use

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

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

Esto permite presionar solo la tecla de tab .
Puede agregar más códigos clave que quiera omitir.

A continuación, indico el código, ya que he agregado tanto el de readonly como el required , aún así envía el formulario.
Después de eliminar readonly funciona correctamente.

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

$(function() {
  $(''#id-checkbox'').change( function(){
   $(''#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 13

Si desea que el usuario seleccione una fecha del selector de fecha, pero no desea que el usuario escriba dentro del cuadro de texto, utilice el siguiente código:

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

});

Answer 14

Si está reutilizando el selector de fecha en varios 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 del lugar donde inicializaste tu datepicker.

Answer 15

Tienes dos opciones para hacer esto. (Por lo que sé)

1. Opción A: Haga que su campo de texto sea de solo lectura. Se puede hacer de la siguiente manera.

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

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

Answer 16

reemplace la identificación del selector de tiempo: IDofDatetimePicker a su id.

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

$ ("# my_txtbox"). tecla presionada (función (evento) {event.preventDefault ();});

Pruebe esta fuente: https://github.com/jonthornton/jquery-timepicker/issues/109

Answer 17

tratar

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

Answer 18

HTML

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

CSS

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

Answer 19

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

agregue el atributo de solo lectura en el jquery.

Answer 20

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

Answer 21

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

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

Deberías usar la sugerencia de Brad8118 que funciona perfectamente.

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

EDITAR: para que funcione en IE use ''keydown'' en lugar de ''keypress''