Heim > Web-Frontend > js-Tutorial > Hauptteil

Analyse der jQuery-Datumsbereichsauswahl

小云云
Freigeben: 2018-01-10 14:55:13
Original
2048 Leute haben es durchsucht

jQuery Date Range Picker ist ein jQuery-Datumsauswahl-Plug-in, mit dem Benutzer einen Datums- und Zeitbereich auswählen können. Das gesamte Datumsauswahl-Plug-in verwendet CSS zum Rendern von Stilen, und es ist sehr einfach, den Skin mithilfe von CSS anzupassen. Und die Browserkompatibilität ist sehr gut und unterstützt mehrere Zeitformate.

Demo ansehen Quellcode herunterladen

Machen Sie sich bereit

Verwenden Sie diese Datumsauswahl Plug-in Erfordert Unterstützung für jQuery 1.3.2+ und Moment 2.2.0+.


<link rel="stylesheet" href="css/daterangepicker.css" rel="external nofollow" /> 
<script src="js/moment.min.js"></script> 
<script src="js/jquery.daterangepicker.js"></script>
Nach dem Login kopieren

HTML-Struktur

Fügen Sie die folgende HTML-Struktur hinzu, in der die Datumsauswahl platziert werden muss, was eine Eingabe ist Kasten.


<input type="text" id="datepicker" value="">
Nach dem Login kopieren

Aufruf des Plugins

Der Aufruf des jQuery Date Range Picker-Plugins ist sehr einfach, genau wie bei anderen gängigen jQuery-Plugins :


$(&#39;#datepicker&#39;).dateRangePicker(option);
Nach dem Login kopieren

Konfigurationsparameter

Die Standardkonfigurationsparameter dieser Datumsauswahl lauten wie folgt:


{ 
 format: &#39;YYYY-MM-DD&#39;, 
 separator: &#39; to &#39;, 
 language: &#39;auto&#39;, 
 startOfWeek: &#39;sunday&#39;,// or monday 
 getValue: function() 
 { 
  return this.value; 
 }, 
 setValue: function(s) 
 { 
  this.value = s; 
 }, 
 startDate: false, 
 endDate: false, 
 minDays: 0, 
 maxDays: 0, 
 showShortcuts: true, 
 time: { 
  enabled: false 
 }, 
 shortcuts: 
 { 
  //&#39;prev-days&#39;: [1,3,5,7], 
  &#39;next-days&#39;: [3,5,7], 
  //&#39;prev&#39; : [&#39;week&#39;,&#39;month&#39;,&#39;year&#39;], 
  &#39;next&#39; : [&#39;week&#39;,&#39;month&#39;,&#39;year&#39;] 
 }, 
 customShortcuts : [], 
 inline:false, 
 container: &#39;body&#39;, 
 alwaysOpen:false, 
 singleDate:false, 
 batchMode:false, 
 beforeShowDay: [function], 
 daypAttrs: [], 
 dayTdAttrs: [], 
 applyBtnClass: &#39;&#39; 
}
Nach dem Login kopieren

format (String): Datumsformat des Augenblicks. Klicken Sie hier, um die Moment-Dokumentation anzuzeigen.

Trennzeichen (String): Das Trennzeichen zwischen Datumszeichenfolgen.

Sprache (String): Die vordefinierten Sprachen sind „en“ und „cn“. Mit diesem Parameter können Sie die Sprache anpassen. Es kann auch auf „Auto“ eingestellt werden, damit der Browser die Sprache selbst erkennt.

startOfWeek (String): „Sonntag“ oder „Montag“.

getValue (Funktion): Diese Funktion wird aufgerufen, wenn der Datumsbereich vom DOM-Element abgerufen wird, und der Kontext der Funktion wird auf das Datepicker-DOM festgelegt.

setValue (Funktion): Diese Funktion wird aufgerufen, wenn ein Datumsbereich in ein DOM-Element geschrieben wird.

startDate (String oder false): Definiert das früheste vom Benutzer zulässige Datum. Das Format ist dasselbe wie das Format.

endDate (String oder false): Definieren Sie das letzte vom Benutzer zulässige Datum. Das Format ist dasselbe wie das Format.

minDays (Anzahl): Dieser Parameter definiert die Mindestanzahl von Tagen im Datumsbereich. Wenn er auf 0 gesetzt ist, bedeutet dies, dass es keine Begrenzung für die Mindestanzahl von Tagen gibt.

maxDays (Anzahl): Dieser Parameter definiert die maximale Anzahl von Tagen im Datumsbereich. Wenn er auf 0 gesetzt ist, bedeutet dies, dass es keine Begrenzung für die maximale Anzahl von Tagen gibt.

showShortcuts (Boolean): Mr. oder verbirgt den Shortcuts-Bereich.

Zeit (Objekt): Wenn dieser Parameter zulässig ist, wird eine Zeitbereichsauswahl hinzugefügt.

Verknüpfungen (Objekt): Definieren Sie Verknüpfungsschaltflächen.

customShortcuts (Array): Definieren Sie benutzerdefinierte Verknüpfungsschaltflächen.

inline (Boolean): Verwenden Sie den Inline-Modus, um die Datumsauswahl anstelle des Overlay-Modus darzustellen. Wenn der Wert auf „true“ gesetzt ist, müssen die Containerparameter gemeinsam festgelegt werden.

container (String, CSS-Selektor || DOM-Objekt): Das zu rendernde Datumsauswahl-DOM-Element.

alwaysOpen (Boolean): Wenn Sie den Inline-Modus verwenden, möchten Sie möglicherweise die Datumsauswahl beim Laden der Seite rendern. Wenn dieser Parameter auf „true“ gesetzt ist, wird die Schaltfläche „Schließen“ ausgeblendet.

singleDate (Boolean): Auf true setzen, um ein einzelnes Datum auszuwählen.

batchMode (false / 'week' / 'month'): Automatischer Stapelverarbeitungsmodus.

Ereignisse

Drei Ereignisse werden ausgelöst, wenn dieser Datumswähler einen Datumsbereich im DOM auswählt.


$(&#39;#datepicker&#39;) 
.dateRangePicker() 
.bind(&#39;datepicker-change&#39;,function(event,obj) 
{ 
 console.log(obj); 
 // obj will be something like this: 
 // { 
 //  date1: (Date object of the earlier date), 
 //  date2: (Date object of the later date), 
 //  value: "2013-06-05 to 2013-06-07" 
 // } 
}) 
.bind(&#39;datepicker-apply&#39;,function(event,obj) 
{ 
 console.log(obj); 
}) 
.bind(&#39;datepicker-close&#39;,function() 
{ 
 console.log(&#39;close&#39;); 
});
Nach dem Login kopieren

API

Nachdem Sie $(dom).dateRangePicker() aufgerufen haben:


$(dom).data(&#39;dateRangePicker&#39;) 
 .setDateRange(&#39;2013-11-20&#39;,&#39;2013-11-25&#39;); //set date range, two date strings should follow the `format` in config object 
 .clear(); // clear date range 
 .close(); // close date range picker overlay 
 .open(); // open date range picker overlay 
 .destroy(); // destroy all date range picker related things
Nach dem Login kopieren

Projektadresse: https://github.com/longbill/jquery-date-range-picker

Verwandte Empfehlungen:

Ein Tutorial zur Verwendung des jQuery-Datumsbereichswählers

Ausführliche Erklärung des JQuery UI-Datumswählers Datepicker

React Native Open Source-Zeit Detaillierte Erklärung der Datumsauswahlkomponente

Das obige ist der detaillierte Inhalt vonAnalyse der jQuery-Datumsbereichsauswahl. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage