Grundlegende Verwendung der JS-Datumssteuerung My97DatePicker

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:

<script type="text/JavaScript" src="My97DatePicker/WdatePicker.js"></script>

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

Artikel empfehlen

CSS3 verwendet Transform-Origin, um Punktverteilung auf einem großen Kreis und Rotationseffekte zu erzielen

Zuerst müssen wir das Attribut „transform-origin“...

Beispiel für ein JavaScript-Meldungsfeld

In JavaScript können drei Arten von Meldungsfelde...

Schriftreferenzen und Übergangseffekte außerhalb des Systems

Code kopieren Der Code lautet wie folgt: <span...

CentOS8-Netzwerkkarten-Konfigurationsdatei

1. Einleitung CentOS8-Systemupdate, die neue Vers...

MySQL-FAQ-Serie: So vermeiden Sie eine plötzliche Vergrößerung der ibdata1-Datei

0. Einleitung Was ist die ibdata1-Datei? ibdata1 ...

Eine kurze Analyse der zugrunde liegenden Prinzipien von MySQL-Transaktionen und Isolationsebenen

Inhaltsverzeichnis Vorwort 1. Kurze Analyse der z...

Detaillierte Erläuterung des Problems der gemischten Verwendung von Limit- und Summenfunktionen in MySQL

Vorwort Heute entschied sich ein Kollege nach der...

Vue öffnet ein neues Fenster und implementiert ein grafisches Beispiel für die Parameterübergabe

Die Funktion, die ich erreichen möchte, besteht d...

Eine kurze Einführung in die Verwendung des Dezimaltyps in MySQL

Die in MySQL unterstützten Gleitkommatypen sind F...

Analyse gängiger Anwendungsbeispiele von MySQL-Prozessfunktionen

Dieser Artikel veranschaulicht anhand von Beispie...

Umfassende Erklärung zum CocosCreator Hot Update

Inhaltsverzeichnis Vorwort Was ist Hot Change Coc...

So stellen Sie FastDFS in Docker bereit

Installieren Sie Fastdfs auf Docker Mount-Verzeic...

Detaillierte Erläuterung der verschachtelten Tabelle im Vue-ElementUI-Formular und der Überprüfung jeder Zeile

Inhaltsverzeichnis Effektanzeige Code-Link Schlüs...

So passen Sie die Höhe eines Divs an die Höhe des Browsers an

Diese alte Frage hat unzählige Frontend-Entwickler...

Verwenden Sie reines CSS, um einen pulsierenden Loader-Effekt-Quellcode zu erstellen

Effektvorschau Klicken Sie rechts auf die Schaltf...