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
jquery
datepicker
Elliot Vargas
quelle
quelle
$("#my_txtbox").prop('readonly', true)
<input ... readonly="readonly" style="cursor:pointer; background-color: #FFFFFF">
Aufgrund meiner Erfahrung würde ich die von Adhip Gupta vorgeschlagene Lösung empfehlen:
Der folgende Code lässt nicht den Benutzertyp neue Charaktere, aber wird sie zu löschen Zeichen zulassen:
Außerdem wird das Formular dadurch für diejenigen unbrauchbar, für die JavaScript deaktiviert ist:
quelle
readonly
Attributs zum Feld über JS stellen Sie sicher, dass sie das Formular weiterhin über die standardmäßige manuelle Eingabe verwenden können, wenn JavaScript deaktiviert ist (und daher den Datepicker nicht verwenden können).$("#my_txtbox").prop('readonly', true)
;Versuchen
quelle
Wenn Sie die Datumsauswahl an mehreren Stellen wiederverwenden, können Sie das Textfeld auch über JavaScript ändern, indem Sie Folgendes verwenden:
direkt nach / vor dem Ort, an dem Sie Ihren Datepicker initialisieren.
quelle
bewirkt, dass das Textfeld nach dem Postback seinen Wert verliert.
Sie sollten lieber den Vorschlag von Brad8118 verwenden, der perfekt funktioniert.
BEARBEITEN: Damit es für den IE funktioniert, verwenden Sie 'keydown' anstelle von 'keypress'.
quelle
Fügen Sie das schreibgeschützte Attribut in die Abfrage ein.
quelle
Sie haben zwei Möglichkeiten, um dies zu erreichen. (Soweit ich weiss)
Option A: Machen Sie Ihr Textfeld schreibgeschützt. Dies kann wie folgt erfolgen.
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/>
quelle
Nach der Initialisierung der Datumsauswahl:
quelle
$(".project-date").datepicker().keydown(false);
Zum Datumsauswahl-Popup, um den Fokus zu erhalten:
Wenn Sie keine Benutzereingaben wünschen, fügen Sie diese dem Eingabefeld hinzu
quelle
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
JS
Hier ist die Geige:
http://jsfiddle.net/matbaric/wh1cb6cy/
Meine Version von bootstrap-datetimepicker.js ist 4.17.45
quelle
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.
quelle
HTML
CSS
quelle
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):quelle
Anstatt schreibgeschützt hinzuzufügen, können Sie auch onkeypress = "return false;"
quelle
Ich habe festgestellt, dass das jQuery-Kalender-Plugin zumindest für mich im Allgemeinen besser für die Auswahl von Daten geeignet ist.
quelle
quelle
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.
quelle
$ ("# my_txtbox"). prop ('schreibgeschützt', wahr)
Lief wie am Schnürchen..
quelle
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.
quelle
Ich weiß, dass diese Frage bereits beantwortet ist und die meisten vorgeschlagen haben,
readonly
Attribution zu verwenden .Ich möchte nur mein Szenario teilen und antworten.
Nachdem ich
readonly
meinem HTML-Element ein Attribut hinzugefügt hatte , trat das Problem auf, dass ich dieses Attribut nicht sorequired
dynamisch erstellen kann.Auch versuchte Einstellung als beide
readonly
undrequired
zur HTML-Erstellungszeit einzustellen.Daher werde ich vorschlagen, nicht zu verwenden,
readonly
wenn Sie esrequired
auch einstellen möchten .Verwenden Sie stattdessen
Dies erlaubt nur das Drücken der
tab
Taste.Sie können weitere Schlüsselcodes hinzufügen, die Sie umgehen möchten.
Ich unten Code, da ich beide hinzugefügt habe
readonly
undrequired
es immer noch das Formular sendet.Nach dem Entfernen
readonly
funktioniert es ordnungsgemäß.https://jsfiddle.net/shantaram/hd9o7eor/
quelle
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
quelle
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:oder, wenn Sie es lieber im Skript tun möchten:
Ich habe es nicht ausgiebig getestet, aber es funktioniert gut mit den Android-Setups, mit denen ich es verwendet habe.
quelle
Oder Sie können beispielsweise ein verstecktes Feld verwenden, um den Wert zu speichern ...
und in der $ ("# my_txtbox"). datepicker ({options:
quelle
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:
quelle