jQuery Datepicker mit Texteingabe, die keine Benutzereingaben zulässt

Wie verwende ich den jQuery Datepicker mit einer Textfeldeingabe:

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

Dadurch kann der Benutzer keinen zufälligen Text in das Textfeld eingeben. Ich möchte, dass der Datepicker angezeigt wird, wenn das Textfeld den Fokus erhält oder der Benutzer darauf klickt, aber ich möchte, dass das Textfeld alle Benutzereingaben über die Tastatur (Kopieren und Einfügen oder andere) ignoriert. Ich möchte das Textfeld ausschließlich aus dem Datepicker-Kalender ausfüllen.

Ist das möglich?

jQuery 1.2.6
Datepicker 1.5.2

Sie sollten in der Lage sein, das Attribut readonly für die Texteingabe zu verwenden, und jQuery kann den Inhalt weiterhin bearbeiten.

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

Aufgrund meiner Erfahrung würde ich die von Adhip Gupta vorgeschlagene Lösung empfehlen:

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

Der folgende Code lässt nicht den Benutzertyp neue Charaktere, aber wird sie zu löschen Zeichen zulassen:

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

Außerdem wird das Formular dadurch für diejenigen unbrauchbar, für die JavaScript deaktiviert ist:

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

Versuchen

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

Wenn Sie die Datumsauswahl an mehreren Stellen wiederverwenden, können Sie das Textfeld auch über JavaScript ändern, indem Sie Folgendes verwenden:

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

direkt nach / vor dem Ort, an dem Sie Ihren Datepicker initialisieren.

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

bewirkt, dass das Textfeld nach dem Postback seinen Wert verliert.

Sie sollten lieber den Vorschlag von Brad8118 verwenden, der perfekt funktioniert.

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

BEARBEITEN: Damit es für den IE funktioniert, verwenden Sie 'keydown' anstelle von 'keypress'.

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

Fügen Sie das schreibgeschützte Attribut in die Abfrage ein.

Sie haben zwei Möglichkeiten, um dies zu erreichen. (Soweit ich weiss)

1. Option A: Machen Sie Ihr Textfeld schreibgeschützt. Dies kann wie folgt erfolgen.

2. Option B: Ändern Sie den Fokus des Cursors. Stellen Sie ti auf Unschärfe. Dies kann durch Einrichten des Attributs onfocus="this.blur()"für das Textfeld Ihrer Datumsauswahl erfolgen.

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

Nach der Initialisierung der Datumsauswahl:

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

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

Zum Datumsauswahl-Popup, um den Fokus zu erhalten:

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

Wenn Sie keine Benutzereingaben wünschen, fügen Sie diese dem Eingabefeld hinzu

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

Ich bin gerade darauf gestoßen, also teile ich es hier. Hier ist die Option

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

Hier ist der Code.

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

Hier ist die Geige:

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

Meine Version von bootstrap-datetimepicker.js ist 4.17.45

Bei dieser Demo wird der Kalender über das Textfeld gelegt, sodass Sie ihn nicht eingeben können. Sie können das Eingabefeld auch so einstellen, dass es im HTML-Code schreibgeschützt ist.

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

HTML

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

CSS

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

Ich weiß, dass dieser Thread alt ist, aber für andere, die auf dasselbe Problem stoßen, die @ Brad8118-Lösung implementieren (was ich bevorzuge, denn wenn Sie die Eingabe schreibgeschützt vornehmen, kann der Benutzer den vom Datepicker eingefügten Datumswert nicht löschen Wenn er wählt) und auch verhindern muss, dass der Benutzer einen Wert einfügt (wie @ErikPhilips vorgeschlagen hat), lasse ich diesen Zusatz hier, der für mich funktioniert hat: $("#my_txtbox").bind('paste',function(e) { e.preventDefault(); //disable paste });von hier https://www.dotnettricks.com/learn/ jquery / disable-cut-copy-and-paste-in-textbox-using-jquery-javascript und das gesamte von mir verwendete spezifische Skript (stattdessen mit dem Fengyuanchen / Datepicker-Plugin):

$('[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;

Anstatt schreibgeschützt hinzuzufügen, können Sie auch onkeypress = "return false;"

Ich habe festgestellt, dass das jQuery-Kalender-Plugin zumindest für mich im Allgemeinen besser für die Auswahl von Daten geeignet ist.

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

Hier ist Ihre Antwort, die gelöst werden kann. Sie möchten jquery nicht verwenden, wenn Sie die Benutzereingabe in der Textfeldsteuerung eingeschränkt haben.

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

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

$ ("# my_txtbox"). prop ('schreibgeschützt', wahr)

Lief wie am Schnürchen..

Anstatt ein Textfeld zu verwenden, können Sie auch die Schaltfläche verwenden. Funktioniert am besten für mich, wenn ich nicht möchte, dass Benutzer das Datum manuell schreiben.

Ich weiß, dass diese Frage bereits beantwortet ist und die meisten vorgeschlagen haben, readonlyAttribution zu verwenden .
Ich möchte nur mein Szenario teilen und antworten.

Nachdem ich readonlymeinem HTML-Element ein Attribut hinzugefügt hatte , trat das Problem auf, dass ich dieses Attribut nicht so requireddynamisch erstellen kann.
Auch versuchte Einstellung als beide readonlyundrequired zur HTML-Erstellungszeit einzustellen.

Daher werde ich vorschlagen, nicht zu verwenden, readonlywenn Sie es requiredauch einstellen möchten .

Verwenden Sie stattdessen

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

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

Dies erlaubt nur das Drücken der tabTaste.
Sie können weitere Schlüsselcodes hinzufügen, die Sie umgehen möchten.

Ich unten Code, da ich beide hinzugefügt habe readonlyund requiredes immer noch das Formular sendet.
Nach dem Entfernen readonlyfunktioniert es ordnungsgemäß.

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>

Ersetzen Sie die ID der Zeitauswahl: IDofDatetimePicker durch Ihre ID.

Dadurch wird verhindert, dass der Benutzer weitere Tastatureingaben eingibt. Der Benutzer kann jedoch auf das Zeit-Popup zugreifen.

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

Versuchen Sie diese Quelle: https://github.com/jonthornton/jquery-timepicker/issues/109

Diese Frage hat viele ältere Antworten und scheint schreibgeschützt die allgemein akzeptierte Lösung zu sein. Ich glaube, der bessere Ansatz in modernen Browsern ist die Verwendung inputmode="none"des HTML-Eingabe-Tags:

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

oder, wenn Sie es lieber im Skript tun möchten:

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

Ich habe es nicht ausgiebig getestet, aber es funktioniert gut mit den Android-Setups, mit denen ich es verwendet habe.

Oder Sie können beispielsweise ein verstecktes Feld verwenden, um den Wert zu speichern ...

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

und in der $ ("# my_txtbox"). datepicker ({options:

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

Wenn Sie möchten, dass der Benutzer ein Datum aus der Datumsauswahl auswählt, der Benutzer jedoch nicht in das Textfeld eingeben soll, verwenden Sie den folgenden Code:

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

});