Grundlegende Verwendung der JS-Datumssteuerung My97DatePicker

My97DatePicker ist ein sehr flexibles und benutzerfreundliches Datumssteuerelement. Sehr einfach zu bedienen.

1. Laden Sie das My97DatePicker-Komponentenpaket herunter

Download-Adresse: https://www.jb51.net/jiaoben/18012.html

2. Fügen Sie die JS-Komponentendatei in die Seite ein:

3. Beispiele

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <Kopf>
        <title>Verwendung der My97DatePicker-Datumssteuerung</title>
      </Kopf>
      <Text>
        <Mitte>
            <h2>Verwendung der My97DatePicker-Datumssteuerung</h2>
        </center>
                Grundlegende Verwendung:
        <input id="" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true})" /><br><br>

                Es können nur Daten vor dem heutigen Tag ausgewählt werden:
        <input id="" class="Wdate" onfocus="WdatePicker({readOnly:true,maxDate:'%y-%M-%d'})" /><br><br>

               Verwenden Sie Operationsausdrücke, um nur Daten von vor 20 Stunden bis 30 Stunden später auszuwählen<input id="" class="Wdate" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',minDate:'%y-%M-%d {%H-20}:%m:%s',maxDate:'%y-%M-%d {%H+30}:%m:%s'})" /><br><br>

                Start- und Enddatum: <!-- $dp.$ entspricht der Funktion document.getElementById. -->
        <input id="sdate" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true,maxDate:'#F{$dp.$D(\'edate\')}'})" />
        -
        <input id="edate" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true,minDate:'#F{$dp.$D(\'sdate\')}',startDate:'#F{$dp.$D(\'sdate\',{d:+1})}'})" /><br><br>

      </body>
      <script type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script>
    </html>

Wenn Sie die Konfigurationsinformationen ändern müssen, fügen Sie einfach die relevanten Konfigurationsinformationen WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true,maxDate:'#F{$dp.$D(\'edate\')}'})"

4. Häufig verwendete Konfigurationsinformationen.

Die Konfigurationsinformationen werden hauptsächlich im {}-Objekt der WdatePicker-Methode von onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true})" definiert.

Häufig verwendete Konfigurationsinformationen sind in der Datei WdatePicker.js definiert.

var $dp,WdatePicker;(Funktion(){var _={
    $wdate:wahr,
    $dpPfad:"",
    $crossFrame:true,
    doubleCalendar:false, //Ob es ein zweimonatlicher Kalender ist autoUpdateOnChanged:false,
    position:{}, //Position wie: position:{left:100,top:50}
    Sprache: "auto",
    skin:"default", //Skin dateFmt:"yyyy-MM-dd", //Datumsformat realDateFmt:"yyyy-MM-dd",
    realTimeFmt:"HH:mm:ss",
    realFullFmt:"%Datum %Uhrzeit",
    minDate:"1900-01-01 00:00:00", //Minimales Datum maxDate:"2099-12-31 23:59:59", //Maximales Datum startDate:"", //Startdatum alwaysUseStartDate:false, //Wenn das Datumsfeld einen beliebigen Wert enthält, verwenden Sie immer startDate als Startdatum yearOffset:1911,
    firstDayOfWeek:0, //Ersten Tag der Woche anpassenisShowWeek:false, //Wochentage anzeigenhighLineWeekDay:true, //Sonntag hervorhebenisShowClear:true, //Löschen anzeigenisShowToday:true, //Heute anzeigenisShowOK:true, //OK anzeigen
    isShowOthers:true,
    readOnly:false, //Ist es schreibgeschützt? qsEnabled:true,
    errDealMode:0, //Automatische Fehlerkorrekturfunktion//0 Bei Eingabe eines falschen Datums erfolgt zunächst eine Abfrage//1 Bei Eingabe eines falschen Datums wird der vorherige korrekte Wert automatisch wiederhergestellt//2 Bei Eingabe eines falschen Datums erfolgt keine Abfrage oder Änderung, es wird nur eine Markierung vorgenommen, das Datumsfeld wird jedoch nicht sofort ausgeblendet autoPickDate:null, //Grund für zweimaliges Klicken zur Datumsauswahl//Wenn es false ist, wird das Datum beim Anklicken nicht automatisch eingetragen, sondern muss durch Bestätigen eingegeben werden//Wenn es true ist, kann der Datumswert durch Anklicken des Datums zurückgegeben werden//Wenn es null ist (empfohlen), setzen Sie es auf false, sofern Zeit vorhanden ist, andernfalls auf true
    specialDates:null, //Besondere Daten specialDays:null, //Besondere Tage disabledDates:null, //Ungültige Daten wie: disabledDates:['5$']
    disabledDays:null, //Ungültige Tage wie: disabledDays:[6]
    Gegenteil:false, //Gültiges Datum

Damit ist dieser Artikel über die grundlegende Verwendung des JS-Datumssteuerelements My97DatePicker abgeschlossen. Ich hoffe, dass es für jedermanns Studium hilfreich sein wird, und ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

AngularJS ruft den von My97DatePicker ausgewählten Wert ab
Empfohlen werden drei Plug-Ins zur Datumsauswahl (My97DatePicker, jquery.datepicker, Mobiscroll).
Das ASP.NET My97DatePicker-Datumssteuerelement realisiert die OA-Datumsnotizfunktion
ASP.NET verwendet das Datumssteuerelementbeispiel My97DatePicker
JQuery-Kalender-Plugin My97DatePicker Datumsbereichslimit

<<: Details zum Vergleich der MySQL-Datenkomprimierungsleistung

>>: Problem beim doppelten Laden, wenn die Seite img src enthält

Detailliertes Tutorial zur Installation des PHP-FPM-Dienstes/der PHP-FPM-Erweiterung/-Konfiguration in Docker

Grundlegende Verwendung der JS-Datumssteuerung My97DatePicker

1. Laden Sie das My97DatePicker-Komponentenpaket herunter

2. Fügen Sie die JS-Komponentendatei in die Seite ein:

3. Beispiele

4. Häufig verwendete Konfigurationsinformationen.

Detailliertes Tutorial zur Installation des PHP-FPM-Dienstes/der PHP-FPM-Erweiterung/-Konfiguration in Docker

Detaillierte Erläuterung des Linux-Textverarbeitungsbefehls sort

Tutorial zur Samba-Konfiguration für die Dateifreigabe im Linux-System

Detaillierte Einführung in das MySQL-Installationstutorial unter Windows

Detailliertes Tutorial zur Installation von MySQL 8.0 aus dem Quellcode auf CentOS 7.4

Mysql verwendet gespeicherte Prozeduren, um schnell Millionen von Datenbeispielcodes hinzuzufügen

So schreiben Sie den Einführungsinhalt der Infoseite der Website

CSS-Sprites-Technologie integriert mehrere Hintergründe in ein PNG-Bild CSS-Positionierung

MySQL 5.7.18 Installations-Tutorial unter Windows

Diagramm zur Installation von VMware 14 unter Windows 10

Artikel empfehlen

Die Verwendung von FrameLayout in sechs Layouts

js-Datentypen und Beispiele für ihre Beurteilungsmethoden

Eine kurze Erläuterung der Unterschiede zwischen FTP, FTPS und SFTP

Wie InnoDB die Serialisierungsisolationsebene implementiert

Lösen Sie das Problem, dass Zeilenhöhe = Elementhöhe, der Text aber nicht vertikal zentriert ist

Chinesische Parameterbeschreibung und Verwendungsbeispiele für ffmpeg

Beispielcode zur Implementierung eines Hintergrundunschärfeeffekts mit CSS

Dieser Artikel hilft Ihnen, JavaScript-Variablen und -Datentypen zu verstehen

Implementierungsbeispiel zum Schließen der Browserabmeldung in Vue

Webdesign-Erfahrung: Selbstgerechte Webdesigner

Lösung für das Problem, dass Docker Containerdienste nicht stoppen oder löschen kann

Zusätzliche Anweisungen zur Verwendung von Gettern und Aktionen in Vuex

Detaillierte Erläuterung der Anwendungsbeispiele für Vue-Router 4

Detaillierte Erklärung des Unterschieds zwischen dem Standardwert des CSS-Attributs width: auto und width: 100%

In HTML eingebettetes Flash Lösung zum Einbetten von Flash-Dateien in den HTML-Webseitencode (Teil 2)