Bootstrap-Datumsbereichsauswahl erhält das aktuelle Datum, über dem die Maus schwebt

8

DIESER DATUM-PICKER HAT DIE FUNKTIONALITÄT IM NACHT. Ссылка

Aber ich benutze dieses Plugin , wie bekomme ich das aktuelle Datum, über dem die Maus schwebt? Für ein Beispiel, wenn ich den 23. Februar 2016 schwebe, wie bekomme ich das Datum 23.? getDate wird erst ausgelöst, wenn ich auf ein Datum klicke. Also aktuelles Datum beim Hover? Vielen Dank

HINWEIS

Ich habe jquery-ui und bootstrap datepicker beide auf derselben Seite, also gab es einen Konflikt. Um den Konflikt zu lösen, verwende ich bootstrapDP anstelle von datepicker .

Mein HTML

%Vor%

Meine JS

%Vor%     
nasty 10.03.2016, 03:18
quelle

4 Antworten

5

Der Datepicker wird als HTML-Datenattribut in der input gespeichert, an die er gebunden ist, und ist somit zugänglich mit:

%Vor%

Bei der Überprüfung des Objekts datepicker werden zwei nützliche Eigenschaften angezeigt, die erste ist die Eigenschaft viewDate . Dies speichert lediglich das Datum der aktuellen Monatsansicht (kein bestimmter Tag, aber das ist zu diesem Zeitpunkt nicht wichtig, da wir dies programmatisch feststellen werden).

Die zweite Eigenschaft, die wir benötigen, ist die Eigenschaft picker . Dies gibt uns den DOM-Knoten, unter dem der Picker existiert:

%Vor%

Und von dort aus ist es ein einfaches DOM-Traversal, um die Tag-Elemente zu erreichen (sie sind alle TD -Elemente mit der Klasse 'Tag'):

%Vor%

Wenn man alles zusammenfasst, könnte man den aktuellen Tag, an dem man schwebt, mit:

bekommen %Vor%

Wir müssen uns dann damit befassen, dass sich die day -Zellen auf die vorherigen oder nächsten Monate beziehen können. Glücklicherweise wird dies durch das Vorhandensein der Klassen old (für letzten Monat) und new (für nächsten Monat) hervorgehoben.

Unter Verwendung dieser Informationen, kombiniert mit der oben besprochenen Eigenschaft viewDate , können wir einige Datumsmanipulationen durchführen, um das aktuelle Datum festzulegen (beachten Sie die zusätzlichen Prüfungen, um zu gewährleisten, dass Jahr und Monat geändert werden) ein Monat vom ersten oder letzten Monat des Jahres):

%Vor%

Hinweis : Date.getMonth() gibt eine ganze Zahl im Bereich 0.11 zurück (0 ist der Januar, 11 ist der Dezember). Dies ist wichtig zu erinnern.

    
toomanyredirects 14.03.2016, 23:39
quelle
3

Versuchen Sie dies, überprüfen Sie die Konsole für die Ausgabe, Geigenverbindung Ссылка

%Vor%

hoffe das hilft ..:)

    
mike tracker 20.03.2016 08:44
quelle
2

Verstanden! Live Demo-Geige

Der interessante Teil dieses Codes ist:

%Vor%

Erklärung:

Sie können das numerische Datum aus $(".bootstrapDP td.day") extrahieren, wie im Code gezeigt. Der Monat und das Datum stammen von $(".bootstrapDP-switch") , können sich aber unterscheiden, wenn Sie über einem Datum des "letzten" oder "nächsten" Monats verweilen.

Deshalb habe ich auch einen Helfer function getMonthYear im Lösungscode zur Verfügung gestellt, der bestimmt, ob Sie ' im letzten oder nächsten Monat und kehren entsprechend zurück. Andere Monate können aus $(".bootstrapDP-months") extrahiert werden, wenn eines der angezeigten Daten ausgewählt wird, die in den "nächsten" oder "letzten" Monat fallen.

Im Moment habe ich darauf hingewiesen, dass das Überfahren eines deaktivierten Datums keine Auswirkungen hat. Dies könnte durch Entfernen der Zeile if(x.hasClass("disabled")) { return; }

geändert werden

Bestätigung

Diese Lösung baut auf der vorherigen Lösung von @mike tracker auf.

    
sqsinger 21.03.2016 16:52
quelle
2
%Vor%     
Sabbin 21.03.2016 14:08
quelle

Tags und Links