Heim > Web-Frontend > js-Tutorial > Hauptteil

Implementieren Sie die JS-Datums-/Uhrzeitauswahl

php中世界最好的语言
Freigeben: 2018-04-08 14:50:33
Original
3987 Leute haben es durchsucht

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
Nach dem Login kopieren

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>
Nach dem Login kopieren

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");
Nach dem Login kopieren
jQuery
// 如果可用,推荐使用 es 模块
import flatpickr from "flatpickr";
Nach dem Login kopieren

Wenn Sie jQuery verwenden, ist flatpickr als Plugin verfügbar.
// 如果在框架中使用 flatpickr ,则建议直接传递该元素
flatpickr(element, {});
// 选择器也被支持
flatpickr("#myID", {});
// 创建多个实例
flatpickr(".anotherSelector");
Nach dem Login kopieren

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);
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage