Implémenter le sélecteur de date et d'heure JS

Cette fois, je vais vous présenter l'implémentation du sélecteur de date heure JS et quelles sont les précautions pour implémenter le sélecteur de date et d'heure JS Ce qui suit est un cas pratique, prenons. un regard.

flatpickr est un sélecteur de date/heure JavaScript léger, axé sur l'UX et extensible.

Télécharger la démo GitHub

flatpickr ne dépend d'aucune bibliothèque. Interface utilisateur plus petite mais beaucoup de thèmes. Une API riche et un système d'événements le rendent adapté à n'importe quel environnement. Disponible avec webpack et en tant que plugin jQuery.

Installez le module flatpickr à l'aide de NPM. Outil de gestion des packages : https://www.npmjs.com/package/bower-npm-resolver

Environnement non module

Introduisez directement les fichiers flatpickr

# using npm install
npm i flatpickr --save

Utilisation

Si vous utilisez webpack, vous devez importer flatpickr.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

Les méthodes suivantes sont valables pour créer des instances flatpickr.

La configuration est facultative et passée dans l'objet {}.

// commonjs
const flatpickr = require("flatpickr");

jQuery

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

Si vous utilisez jQuery, flatpickr est disponible en plugin.

// 如果在框架中使用 flatpickr ，则建议直接传递该元素
flatpickr(element, {});
// 选择器也被支持
flatpickr("#myID", {});
// 创建多个实例
flatpickr(".anotherSelector");

Je pense que vous maîtrisez la méthode après avoir lu le cas présenté dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le sujet. Site Web chinois PHP !

Lecture recommandée :

$(".selector").flatpickr(optional_config);

Comment implémenter l'optimisation d'échafaudage dans webpack

Comment éviter les malentendus liés à l'utilisation de Dom dans Angular

Étapes détaillées du webpack v4 du développement au prd

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!