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

Question

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

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

que no permite al usuario ingresar texto aleatorio en el cuadro de texto. Quiero que el Selector de fechas 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 & Amp; pegar, o cualquier otro). Quiero llenar el cuadro de texto exclusivamente del calendario Datepicker.

¿Es esto posible?

jQuery 1.2.6
Datepicker 1.5.2

Answer 1

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

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

Answer 2

Según 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 le permitirá eliminar caracteres:

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

Además, esto hará que el formulario sea inútil para aquellos que tienen JavaScript deshabilitado:

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

Answer 3

prueba

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

Answer 4

Si está reutilizando el selector de fecha en varios lugares, entonces sería adecuado modificar el cuadro de texto también a través de JavaScript mediante el uso de algo como:

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

justo después / antes del lugar donde inicializa su selector de fechas.

Answer 5

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

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

Prefieres usar la sugerencia de Brad8118 que funciona perfectamente.

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

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

Answer 6

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

agregue el atributo de solo lectura en el jquery.

Answer 7

Después de inicializar el selector de fecha:

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

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

Answer 8

Al selector de fecha para que aparezca el 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 9

Tienes dos opciones para hacer esto. (Que yo sepa)

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 sobre el foco. Configura ti para difuminar. 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 10

Acabo de encontrar 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 11

Esta demo hace eso por colocando el calendario sobre el campo de texto para que no pueda escribirlo. También puede configurar el campo de entrada para leer solo en el HTML para asegurarse.

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

Answer 12

HTML

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

CSS

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

Answer 13

Sé que este hilo es antiguo, pero para otros que tienen el mismo problema, implementan la solución @ Brad8118 (lo cual prefiero, porque si eliges hacer la entrada de solo lectura, el usuario no podrá eliminar el valor de la fecha insertado desde datepicker si lo desea) y también debe evitar que el usuario pegue un valor (como @ErikPhilips sugirió que se necesitara), dejé esta adición aquí, que funcionó para mí: $("#my_txtbox").bind('paste',function(e) { e.preventDefault(); //disable paste }); desde aquí https://www.dotnettricks.com/learn/jquery/disable-cut-copy-and-paste-in-textbox-using-jquery-javascript y todo el script específico que utilicé (usando el complemento fengyuanchen / datepicker):

$('[data-toggle="datepicker"]').datepicker({
    autoHide: true,
    pick: function (e) {
        e.preventDefault();
        $(this).val($(this).datepicker('getDate', true));
    }
}).keypress(function(event) {
    event.preventDefault(); // prevent keyboard writing but allowing value deletion
}).bind('paste',function(e) {
    e.preventDefault()
}); //disable paste;

Answer 14

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

Answer 15

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

Answer 16

Aquí está su respuesta, que es la forma de resolverla. No desea usar jquery cuando restringe la entrada del usuario en el control del cuadro de texto.

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

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

Answer 17

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

funcionó como un encanto ..

Answer 18

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 19

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

Después de agregar el atributo required a mi Elemento HTML , me enfrenté al problema de que no puedo hacer que el atributo sea tab dinámicamente.
Incluso intenté configurar como <=> y <=> en el momento de la creación de HTML.

Por lo tanto, sugeriré que no use <=> si desea configurarlo también como <=> .

En lugar de usar

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

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

Esto permite presionar la tecla <=> solamente.
Puede agregar más códigos clave que desea omitir.

I debajo del código ya que agregué <=> y <=> todavía envía el formulario.
Después de eliminar <=> 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 20

reemplaza la ID del selector de tiempo: 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 ();});

Prueba esto fuente: https://github.com/jonthornton/jquery-timepicker/issues/109

Answer 21

Esta pregunta tiene muchas respuestas antiguas y solo parece ser la solución generalmente aceptada. Creo que el mejor enfoque en los navegadores modernos es usar el inputmode="none" en la etiqueta de entrada HTML:

<input type="text" ... inputmode="none" />

o, si prefiere hacerlo en script:

$(selector).attr('inputmode', 'none');

No lo he probado exhaustivamente, pero funciona bien en las configuraciones de Android con las que lo he usado.

Answer 22

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

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

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

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

Answer 23

Si desea que el usuario seleccione una fecha del selector de fechas 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);

});