Heim > Artikel > Web-Frontend > So verwenden Sie die JS-Datums-/Uhrzeitauswahl
Dieses Mal zeige ich Ihnen, wie Sie die JS-Datums-Zeitauswahl verwenden und welche Vorsichtsmaßnahmen für die Verwendung der JS-Datums- und Zeitauswahl gelten. Das Folgende ist ein praktischer Fall. Werfen wir einen Blick darauf.
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
# using npm install npm i flatpickr --save
Nicht-Modul-Umgebung
flatpickr-Datei direkt importieren <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
Wenn Sie Webpack verwenden, müssen Sie flatpickr importieren.
// commonjs const flatpickr = require("flatpickr");rrree
Im Folgenden finden Sie gültige Methoden zum Erstellen von Flatpickr-Instanzen.
// 如果可用,推荐使用 es 模块 import flatpickr from "flatpickr";
Die Konfiguration ist optional und wird im Objekt {} übergeben.
jQueryWenn Sie jQuery verwenden, ist flatpickr als Plugin verfügbar.
// 如果在框架中使用 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 auf der chinesischen PHP-Website!
Empfohlene Lektüre:
So packen Sie Vue-Projekte nach Umgebung Detaillierte Erläuterung der Schritte zur Verwendung von Dev-Server im WebpackDetaillierte Erläuterung der Verwendung von Slots/Scopes in Vue
Das obige ist der detaillierte Inhalt vonSo verwenden Sie die JS-Datums-/Uhrzeitauswahl. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!