Markieren Sie Datumsangaben/Bereiche in xdsoft datetimepicker

Question

Ich verwende die xdsoft datetimepicker. Die Readme auf Github zeigen, dass ein Merkmal für Zeiträume hervorzuheben ist im Preis inbegriffen:

Also habe ich es in der documentation gesucht, aber konnte keine Informationen finden, wie dies zu tun.

Answer 1

Die Plugin-Dokumentation enthält keine Updates. Beim Betrachten des Quellcodes scheint es jedoch zwei Optionen zu geben, mit denen Sie Zeiträume zwischen zwei Daten oder bestimmten Daten markieren können. Diese Optionen können eingestellt werden, wenn das Skript aufrufen oder über die setOptions Methode, Beispiele unter:

jQuery('#elem').datetimepicker({ 
    ..., 
    highlightedPeriods: [ 
     "dateStartP1, dateEndP1, 'Description P1', css-class-p1", 
     "dateStartP2, dateEndP2, 'Description P2', css-class-p2" 
    ], 
    ... 
    highlightedDates: [ 
     "date1, 'Description D1', css-class-d1", 
     "date2, 'Description D2', css-class-d2", 
    ], 
    ... 
    onShow: function(date, inst) { 
     this.setOptions({ 
      highlightedDates: ["date3, 'Description D3', css-class-d3"] 
     }) 
    } 
    ... 
}); 

highlightPeriods ist ein Array von Strings, bestehend aus Parameter durch ein Komma getrennt:
„Datum beginnen, Enddatum, Beschreibung, CSS-Klasse „

highlightDates ist ein Array von Zeichenketten zusammengesetzt aus Parameter durch ein Komma getrennt:
“ Datum, eine Beschreibung, CSS-Klasse "

Die letzten beiden Parameter sind optional und wenn Sie sie nicht angeben, wird keine QuickInfo hinzugefügt und eine Standardklasse xdsoft_highlighted_default wird festgelegt.

---

Beispiel - Hervorhebungen Termine zwischen 10. April und 20. April:

highlightedPeriods: ["2017/04/10, 2017/04/20, 'My description', my-highlight-style"] 

Dies jeden Tag zwischen April Highlight wird 10 und 20. April, stellen Sie einen Tooltip, wenn einer dieser Punkte schweben Daten mit dem Text My description und fügen Sie eine css-Klasse my-highlight-style zu jedem von ihnen hinzu.

Beispiel - Hervorhebungen 1. April:

highlightedDates: ["2017/04/01, 'April Fools', my-highlight-style"] 

markieren Dies wird zum 1. April eingestellt ein Tooltip, wenn eine dieser Daten mit dem Text April Fools und fügen Sie eine CSS-Klasse my-highlight-style ihm schwebt.

---

Sie können dann die markierten Daten Art, wie Sie die CSS Klasse Wunsch unter Verwendung Sie
angegeben (hier: my-highlight-style).

Plus, wenn Sie benötigen, um dynamisch die Daten abzurufen, können Sie jQuery verwenden:
highlightedDates: [jQuery("#myInput").val() + ", 'User entered date', my-highlight-style"]

Bitte beachten Sie, dass die Daten im gleichen Format als Datetime Optionen müssen:
format: 'Y/m/d',
formatDate: 'Y/m/d'

Späte Antwort, aber h In der Praxis wird es immer noch helfen!