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

So richten Sie den Ziellink eines Tags auf ein Iframe

Verschiedene Implementierungsmethoden von Vue zum Ändern von übergeordneten Komponenteneigenschaften durch untergeordnete Komponenten

Inhaltsverzeichnis Vorwort Gängige Methoden 1. Än...

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.

So richten Sie den Ziellink eines Tags auf ein Iframe

So schreiben Sie speichereffiziente Anwendungen mit Node.js

Docker verpackt das lokale Image und stellt es auf anderen Maschinen wieder her

Einfaches Tutorial zur Verwendung von Navicat für MySQL

Beispielcode zum Installieren der ASPNET.Core3.0-Runtime unter Linux

Nodejs konvertiert JSON-String in JSON-Objekt-Fehlerlösung

Installieren Sie OpenSSL unter Windows und verwenden Sie OpenSSL zum Generieren öffentlicher und privater Schlüssel

Mit JS in zehn Minuten die Existenz von Elementen in einem Array bestimmen

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.13 unter Windows 64 Bit

Detailliertes Tutorial zur schnellen Installation von Zookeeper in Docker

Artikel empfehlen

Vue-Überwachungseigenschaften und berechnete Eigenschaften

Unterschiede zwischen MySQL MyISAM und InnoDB

MySQL-Abfrageanweisungsprozess und grundlegende Konzepte der EXPLAIN-Anweisung und deren Optimierung

Grundlegende Verwendung von Javascript-Array-Includes und -Reduces

Vollständiges Installationstutorial zum Ubuntu 16.04-Image unter VMware

Vue echarts realisiert die dynamische Anzeige von Balkendiagrammen

Geplante vollständige MySQL-Datenbanksicherung

Beispiel für die Konvertierung von Spark RDD in einen Dataframe und das Schreiben in MySQL

MySQL-Reihe: Redo-Log, Undo-Log und Binlog – ausführliche Erklärung

Detaillierte Erläuterung der MySQL-Installation und der neuen Kennwortauthentifizierungsmethode in MySQL 8.0

Verschiedene Implementierungsmethoden von Vue zum Ändern von übergeordneten Komponenteneigenschaften durch untergeordnete Komponenten

Web realisiert den Code zum Öffnen des Fensters zum Hochladen von Dateien durch Klicken auf das Bild

Zusammenfassung der domänenübergreifenden Problembehandlung und -lösungen von Vue

Detaillierte Erklärung der CSS-Float-Eigenschaft

Lösung für das Problem „Fehler beim Konfigurieren von IDEA für die Verbindung zur MySQL-Datenbank“