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

Question

Come si usa jQuery Datepicker con un input da casella di testo:

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

che 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 usando la tastiera (copia & Amp; incolla o qualsiasi altro). Voglio riempire la casella di testo esclusivamente dal calendario di Datepicker.

È possibile?

jQuery 1.2.6
Datepicker 1.5.2

Answer 1

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

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

Answer 2

In base alla mia esperienza, consiglierei la soluzione suggerita da Adhip Gupta:

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

Il codice seguente non consente all'utente di digitare nuovi caratteri, ma consentirà di eliminare i caratteri:

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

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

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

Answer 3

try

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

Answer 4

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

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

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

Answer 5

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

Answer 6

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

aggiungi l'attributo readonly nel jquery.

Answer 7

Dopo aver inizializzato il selettore data:

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

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

Answer 8

Per lanciare l'appuntamento al pop-up in modo da ottenere il 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" />

Answer 9

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.

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

Answer 10

Mi sono appena imbattuto in questo, quindi sto condividendo 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

Answer 11

Questa demo lo fa per posizionando il calendario sul campo di testo in modo da non poterlo digitare. Puoi anche impostare il campo di input in modo che sia leggibile solo in HTML.

<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

So che questo thread è vecchio, ma per gli altri che riscontrano lo stesso problema, implementano la soluzione @ Brad8118 (che preferisco, perché se si sceglie di effettuare l'input in sola lettura, l'utente non sarà in grado di eliminare il valore della data inserito da datepicker se lo desidera) e anche per 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;

Answer 14

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

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

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

Answer 17

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

ha funzionato come un fascino ..

Answer 18

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

Answer 19

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

Dopo aver aggiunto l'attributo required al mio elemento HTML , ho riscontrato il problema di non essere in grado di rendere questo l'attributo tab in modo dinamico.
Ho anche provato a impostare sia <=> che <=> al momento della creazione di HTML.

Quindi suggerirò di non usare <=> se si desidera impostarlo anche su <=> .

Invece usa

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

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

Ciò consente di premere solo il tasto <=> .
Puoi aggiungere altri codici chiave che desideri ignorare.

Ho sotto il codice poiché ho aggiunto sia <=> che <=> invia ancora il modulo.
Dopo aver 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>

Answer 20

sostituisci l'ID del time picker: IDofDatetimePicker al tuo ID.

Ciò impedirà all'utente di immettere ulteriori input da tastiera, ma sarà comunque possibile accedere al pop-up temporale.

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

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

Answer 21

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 inputmode="none" nel 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.

Answer 22

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

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

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

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

Answer 23

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

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

});