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

Der Unterschied zwischen Div und Tabelle in HTML (in allen Aspekten ausführlich besprochen)

Perfekte Lösung für das Problem, dass Windows Server 2012 oder 2016 .NET Framework 3.5 nicht ohne Festplatte installieren kann

Artikel

Detaillierte Erläuterung der MySQL-Datenbank mit zig Millionen Datenabfragen und -speicherungen

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.

Der Unterschied zwischen Div und Tabelle in HTML (in allen Aspekten ausführlich besprochen)

Nginx-Stream-Konfigurationsproxy (Nginx TCP/UDP-Lastausgleich)

Detaillierte Erläuterung des Replikationskonfigurationsbeispiels zwischen MySQL-Containern

Perfekte Lösung für das Problem, dass Windows Server 2012 oder 2016 .NET Framework 3.5 nicht ohne Festplatte installieren kann

Detaillierte Erläuterung der MySQL-Datenbank mit zig Millionen Datenabfragen und -speicherungen

Docker implementiert das erneute Taggen und Löschen des Images des ursprünglichen Tags

Lösung des Konflikts zwischen Linux-Kernel- und SVN-Versionen

Detaillierte Erklärung der Homologie und der Domänenübergreifendkeit, die für Front-End-Interviews erforderlich sind

Detaillierte Prozessanalyse der Docker-Bereitstellung des Snail-Cinema-Systems

Detaillierte Erklärung basierend auf Event Bubbling, Event Capture und Event Delegation

Artikel empfehlen

Lösung für das Problem, dass der externe Verifizierungslastenausgleich von Docker Swarm nicht wirksam wird

Dünne Linientabelle zum Drucken von Webseiten + ultimative Strategie zum Drucken von Seiten

CentOS 7: Erläuterung zum Wechseln des Boot-Kernels und des Boot-Modus

Lassen Sie sich die tiefe Kopie von js verstehen

Detaillierter Prozess der Installation verschiedener Software in Docker unter Windows

Natives JS realisiert zusammengesetzte Bewegungen verschiedener Bewegungen

Methoden zum Bereitstellen von MySQL-Diensten in Docker und die dabei auftretenden Fallstricke

Lösung für „Spezialisierter Schlüssel war zu lang“ in MySQL

Zwei Möglichkeiten zum Erstellen von Docker-Images

So fügen Sie CentOS7 systemd benutzerdefinierte Systemdienste hinzu

MySQL-Abfrageoptimierung mit benutzerdefinierten Variablen

Schreiben Sie einen formellen Blog mit XHTML CSS

Analyse des Sperrmechanismus der MySQL-Datenbank

So führen Sie eine reibungslose if-Beurteilung in js durch

CSS-Benennung: BEM, Scoped CSS, CSS-Module und CSS-in-JS erklärt