So kombinieren Sie den Icon Trigger des jQueryUI DatePicker mit den Inputgruppen von Bootstrap 3

8

jQueryUI hat einen schönen DatePicker mit Icon-Trigger (ein Kalendersymbol öffnet den Kalender, ähnlich wie Outlook).

Auf der anderen Seite sind Bootstrap 3's Input Groups wirklich toll um Icons mit Eingabefeldern zu verbinden.

>

Können die beiden kombiniert werden, ohne eines der beiden zu überschreiben?

Ich habe hier JSFiddle gemacht. Für das «Startdatum» ist der jQueryUI-Icon-Trigger nicht aktiv. Für das «End Date» ist es aktiviert. Das DatePicker-Symbol erscheint leider außerhalb der Eingabegruppe des Enddatums:

Ist es also möglich, den Icon-Trigger als Teil der Input-Gruppe zu aktivieren (sieht wie «Start Date» aus, verhält sich aber wie «End Date») ohne schwere Änderungen?

Hauptsymbol Triggercode:

%Vor%

Haupteingabe Gruppencode:

%Vor%     
bjornte 18.10.2013, 08:00
quelle

4 Antworten

20

Nach Lösungen für ein datepicker Problem suchen Ich war schockiert, eine akzeptierte Antwort mit so vielen Problemen (und 10 Upvotes) zu sehen. Es funktioniert nur durch zufällige Nebenwirkung.

  • Es hat einen DOM ready-Handler innerhalb des click-Ereignisses . Dies ist sinnlos, da es nichts tut (oder zumindest außerhalb des Click-Handlers liegen sollte)
  • Bei jedem Klick auf das Symbol wird datepicker erneut initialisiert

Die korrigierte Version sollte wie folgt aussehen:

%Vor%
  • Initialisiere datepicker nur einmal
  • Ursache Fokus auf die Eingabe, wenn auf das Symbol geklickt wird (wodurch der Kalender gestartet wird).

JSFiddle: Ссылка

Hinweis: Es wird heutzutage bevorzugt, den Shortcut-DOM-ready-Handler zu verwenden. Das Beispiel würde also lauten:

%Vor%

Aktualisieren, um mehrere Steuerelemente über Klassenselektoren zu unterstützen:

Ändern Sie den HTML-Code, um identifizierbare Klassen zu erhalten, und ändern Sie die Fokusauswahl, um das Bearbeitungsfeld relativ zur Schaltfläche auszuwählen (innerhalb derselben Eingabegruppe).

JSFiddle: Ссылка

%Vor%     
Gone Coding 19.02.2016, 09:52
quelle
7

Ich denke, dass Sie jquery ui datepicker auf Bootstrap-Symbol auslösen möchten, wenn es so ist hier ist die Lösung. Demo JSFiddle

JS:

%Vor%     
Rahul Gupta 18.10.2013 11:51
quelle
4

Ich bevorzuge die Verwendung des label -Tags mit dem Attribut for , um das Eingabefeld auszuwählen.

  

Das HTML-Label-Element () repräsentiert eine Beschriftung für ein Element in einer Benutzerschnittstelle. Sie kann einem Steuerelement entweder durch Platzieren des Steuerelementelements im Element oder durch Verwenden des Attributs for zugeordnet werden.

Weitere Details und Beispiele: Ссылка

Der Wert des for -Attributs ist die ID eines markierbaren formbezogenen Elements, z. %Code%. In meinem Verständnis wird es sich auf Ihre Eingabe konzentrieren, da die Eingabe bereits mit dem Datumswähler auslöst. Also, die Arbeit ist erledigt.

%Vor%

JSFiddle: Ссылка

    
AdaroMu 29.10.2015 00:23
quelle
1

%Vor% %Vor% %Vor%
    
Jignesh Patel - Sr. HTML Dev. 17.11.2015 06:02
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Float Erstellt überlappende Divs