Dieses Mal werde ich Ihnen die Implementierung des JS-Datums- Zeitselektors und die Vorsichtsmaßnahmen für die Implementierung des JS-Datums- und Zeitselektors vorstellen. Nehmen wir das Folgende als einen praktischen Fall ein Blick.
flatpickr ist ein leichter, Lean-fokussierter, UX-gesteuerter und erweiterbarer JavaScript Datetime-Picker.
Demo GitHub herunterladen
flatpickr ist von keiner Bibliothek abhängig. Kleinere Benutzeroberfläche, aber viele Themen. Eine umfangreiche API und ein Ereignissystem machen es für jede Umgebung geeignet. Verfügbar mit Webpack und als jQuery-Plugin.
Installieren Sie das Flatpickr-Modul mit NPM. Paketverwaltungstool: https://www.npmjs.com/package/bower-npm-resolver
Nicht-Modul-Umgebung
Flatpickr-Dateien direkt einführen
# using npm install npm i flatpickr --save
Verwendung
Wenn Sie Webpack verwenden, müssen Sie Flatpickr importieren.<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
Im Folgenden finden Sie gültige Methoden zum Erstellen von Flatpickr-Instanzen.
Die Konfiguration ist optional und wird im Objekt {} übergeben.// commonjs const flatpickr = require("flatpickr");
// 如果可用,推荐使用 es 模块 import flatpickr from "flatpickr";
// 如果在框架中使用 flatpickr ,则建议直接传递该元素 flatpickr(element, {}); // 选择器也被支持 flatpickr("#myID", {}); // 创建多个实例 flatpickr(".anotherSelector");
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum Thema PHP chinesische Website! Empfohlene Lektüre:
$(".selector").flatpickr(optional_config);
So implementieren Sie die Gerüstoptimierung im Webpack
Wie Sie die Missverständnisse bei der Verwendung von Dom in Angular vermeiden
Detaillierte Schritte von Webpack v4 von Dev zu PRD
Das obige ist der detaillierte Inhalt vonImplementieren Sie die JS-Datums-/Uhrzeitauswahl. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!