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>

Verwendung

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.

jQuery

Wenn 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 Webpack

Detaillierte 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!