jQuery Datepicker con input di testo che non consente l'input dell'utente

Come posso usare jQuery Datepicker con un input da casella di testo:

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

ciò non consente all'utente di inserire testo casuale nella casella di testo. Voglio che Datepicker appaia quando la casella di testo diventa attiva o l'utente fa clic su di essa, ma voglio che la casella di testo ignori qualsiasi input dell'utente utilizzando la tastiera (copia e incolla o qualsiasi altra). Voglio riempire la casella di testo esclusivamente dal calendario di Datepicker.

È possibile?

jQuery 1.2.6
Datepicker 1.5.2

Dovresti essere in grado di utilizzare l' attributo readonly sull'input di testo e jQuery sarà comunque in grado di modificarne il contenuto.

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

Sulla base della mia esperienza, consiglierei la soluzione suggerita da Adhip Gupta:

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

Il seguente codice non lascerà il tipo di utente nuovi personaggi, ma sarà permettere loro di caratteri di cancellazione:

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

Inoltre, questo renderà il modulo inutile per coloro che hanno disabilitato JavaScript:

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

provare

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

Se stai riutilizzando il selettore della data in più punti, sarebbe opportuno modificare la casella di testo anche tramite JavaScript utilizzando qualcosa come:

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

subito dopo / prima del luogo in cui inizializzi il tuo datepicker.

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

fa sì che la casella di testo perda il suo valore dopo il postback.

Dovresti piuttosto usare il suggerimento di Brad8118 che funziona perfettamente.

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

EDIT: per farlo funzionare per IE usa 'keydown' invece di 'keypress'

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

aggiungi l'attributo readonly nel jquery.

Hai due opzioni per farlo. (Per quanto ne so)

1. Opzione A: Rendi il tuo campo di testo di sola lettura. Può essere fatto come segue.

2. Opzione B: modifica il cursore onfocus. Imposta ti su offuscamento. può essere fatto impostando l'attributo onfocus="this.blur()"nel campo di testo del selettore della data.

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

Dopo aver inizializzato il selettore data:

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

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

Per appuntare il pop-up in modo da ottenere focus:

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

Se non si desidera l'input dell'utente, aggiungerlo al campo di input

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

Mi sono appena imbattuto in questo, quindi condivido qui. Ecco l'opzione

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

Ecco il codice

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

Ecco il violino:

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

La mia versione di bootstrap-datetimepicker.js è la 4.17.45

Questo tipo di demo lo fa posizionando il calendario sul campo di testo in modo da non poterlo digitare. Per sicurezza, puoi anche impostare il campo di input in modo che sia solo in HTML.

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

HTML

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

CSS

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

So che questa discussione è vecchia, ma per gli altri che riscontrano lo stesso problema, quella implementa la soluzione @ Brad8118 (che preferisco, perché se scegli di effettuare l'input in sola lettura, l'utente non sarà in grado di eliminare il valore della data inserito da datepicker se sceglie) e deve anche impedire all'utente di incollare un valore (come suggerito da @ErikPhilips), lascio qui questa aggiunta, che ha funzionato per me: $("#my_txtbox").bind('paste',function(e) { e.preventDefault(); //disable paste });da qui https://www.dotnettricks.com/learn/ jquery / disable-cut-copy-and-paste-in-textbox-using-jquery-javascript e l'intero script specifico usato da me (usando invece il plugin 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;

Invece di aggiungere in sola lettura puoi anche usare onkeypress = "return false;"

Ho scoperto che il plug-in del calendario jQuery, almeno per me, in generale funziona meglio per la selezione delle date.

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

Ecco la tua risposta che è il modo di risolvere. Non vuoi usare jquery quando hai limitato l'input dell'utente nel controllo della casella di testo.

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

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

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

ha funzionato come un fascino ..

Invece di usare la casella di testo puoi usare anche il pulsante. Funziona meglio per me, dove non desidero che gli utenti scrivano manualmente la data.

So che questa domanda ha già una risposta e la maggior parte ha suggerito di usare l' readonlyattribuzione.
Voglio solo condividere il mio scenario e rispondere.

Dopo aver aggiunto l' readonlyattributo al mio elemento HTML , ho riscontrato il problema che non sono in grado di rendere questo attributo in requiredmodo dinamico.
Ho anche provato a impostare entrambi readonlye requiredal momento della creazione di HTML.

Quindi suggerirò di non utilizzare readonlyse si desidera impostarlo requiredanche come .

Invece usa

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

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

Ciò consente di premere tabsolo il tasto.
È possibile aggiungere più codici chiave che si desidera ignorare.

Ho sotto il codice poiché ho aggiunto entrambi readonlye requiredinvia ancora il modulo.
Dopo readonlyaverlo rimosso funziona correttamente.

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>

sostituire l'ID del selettore tempo: IDofDatetimePicker al tuo ID.

Ciò impedirà all'utente di immettere ulteriori input da tastiera, ma l'utente sarà comunque in grado di accedere al popup temporale.

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

Prova questa fonte: https://github.com/jonthornton/jquery-timepicker/issues/109

Questa domanda ha molte risposte più vecchie e di sola lettura sembra essere la soluzione generalmente accettata. Credo che l'approccio migliore nei browser moderni sia utilizzare il inputmode="none"tag di input HTML:

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

oppure, se preferisci farlo nello script:

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

Non l'ho testato ampiamente, ma funziona bene con le configurazioni Android con cui l'ho usato.

Oppure potresti, ad esempio, utilizzare un campo nascosto per memorizzare il valore ...

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

e in $ ("# my_txtbox"). datepicker ({opzioni:

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

Se si desidera che l'utente selezioni una data dal datepicker ma non si desidera che l'utente digiti all'interno della casella di testo, utilizzare il seguente codice:

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

});