Ein Tutorial zur Verwendung der jQuery-Datumsbereichsauswahl

jQuery ist eine browserübergreifende JavaScript-Bibliothek, die Operationen zwischen HTML und JavaScript vereinfacht. In diesem Artikel stellen wir Ihnen ein Tutorial zur Verwendung der jQuery-Datumsbereichsauswahl vor.

Vorbereitung:

Die Verwendung dieses Datumsauswahl-Plug-Ins erfordert die Unterstützung von jQuery 1.3.2+ und Moment 2.2.0+.

<link rel="stylesheet" href="css/daterangepicker.css" /><script src="js/moment.min.js"></script><script src="js/jquery.daterangepicker.js"></script>

HTML-Struktur

Fügen Sie die folgende HTML-Struktur dort hinzu, wo die Datumsauswahl platziert werden muss, bei der es sich um ein Eingabefeld handelt.

<input type="text" id="datepicker" value="">

Plug-in aufrufen

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

$('#datepicker').dateRangePicker(option);

Konfigurationsparameter

Die Standardkonfigurationsparameter dieser Datumsauswahl lauten wie folgt:

{
    format: 'YYYY-MM-DD',
    separator: ' to ',
    language: 'auto',
    startOfWeek: 'sunday',// 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:
    {        //'prev-days': [1,3,5,7],
        'next-days': [3,5,7],        //'prev' : ['week','month','year'],
        'next' : ['week','month','year']
    },
    customShortcuts : [],
    inline:false,
    container: 'body',
    alwaysOpen:false,
    singleDate:false,
    batchMode:false,
    beforeShowDay: [function],    dayDivAttrs: [],    dayTdAttrs: [],    applyBtnClass: ''
}

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.

$('#datepicker')
.dateRangePicker()
.bind('datepicker-change',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('datepicker-apply',function(event,obj){    console.log(obj);
})
.bind('datepicker-close',function(){    console.log('close');
});

API

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

$(dom).data('dateRangePicker')
    .setDateRange('2013-11-20','2013-11-25');  //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

Das Obige ist ein Tutorial zur Verwendung des jQuery-Datumsbereichs Selektor, ich hoffe, es hilft allen.

Verwandte Empfehlungen:

php überprüft, ob das Format eines Datums korrekt ist

Js-Methode zum Abrufen des aktuellen Datums und der aktuellen Uhrzeit andere Vorgänge

Detaillierte Erklärung, wie man das aktuelle Datum und die aktuelle Uhrzeit mithilfe von JavaScript erhält

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