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

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

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

eso no permite al usuario ingresar texto aleatorio en el cuadro de texto. Quiero que el Selector de fecha 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 Datepicker.

es posible?

jQuery 1.2.6
Datepicker 1.5.2

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'>

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" />

tratar

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

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.

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

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

Debería 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'

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

agregue el atributo de solo lectura en el jquery.

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: cambiar el cursor sobre el enfoque. Configura ti para difuminar. 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/>

Después de inicializar el selector de fecha:

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

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

Para seleccionar el elemento emergente en 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" />

Acabo de encontrar esto, así que estoy compartiendo aquí. Aqui esta la opcion

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

Este tipo de demostración lo hace 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 estar seguro.

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

HTML

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

CSS

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

Sé que este hilo es antiguo, pero para otros que tienen el mismo problema, implementan la solución @ Brad8118 (lo cual prefiero, porque si elige hacer la entrada de solo lectura, el usuario no podrá eliminar el valor de fecha insertado de datepicker si lo desea) y también necesita evitar que el usuario pegue un valor (como @ErikPhilips sugirió que se necesitara), dejo 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;

En lugar de agregar readonly , también puede usar onkeypress = "return false;"

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

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

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"/>

$ ("# my_txtbox"). prop ('solo lectura', verdadero)

trabajado como un encanto..

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.

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

Después de agregar el readonlyatributo a mi Elemento HTML , me enfrenté al problema de que no puedo hacer este atributo de forma requireddinámica.
Incluso intenté configurarlo como ambosreadonly y requireden el momento de la creación de HTML.

Así que sugeriré no usar readonly si desea configurarlo requiredtambién.

En lugar de usar

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

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

Esto permite presionar tabsolo la tecla.
Puede agregar más códigos clave que desea omitir.

Yo debajo del código ya que he agregado ambos readonlyy requiredtodavía envía el formulario.
Después de quitar 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>

reemplace la ID del selector de tiempo: IDofDatetimePicker a su ID.

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 ();});

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

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 la inputmode="none"etiqueta de entrada HTML:

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

o, si prefieres 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.

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);
        }

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);

});