Implementieren Sie die JS-Datums-/Uhrzeitauswahl

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");

jQuery

// 如果可用，推荐使用 es 模块
import flatpickr from "flatpickr";

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