Maison > interface Web > js tutoriel > Comment utiliser flatpickr dans votre projet

Comment utiliser flatpickr dans votre projet

php中世界最好的语言
Libérer: 2018-06-12 09:59:11
original
3867 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser flatpickr dans le projet, et quelles sont les précautions à prendre pour utiliser flatpickr dans le projet. Ce qui suit est un cas pratique, jetons un coup d'oeil.

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 de packages : https://www.npmjs.com/package/bower-npm-resolver

Environnement non module

Importer directement des fichiers flatpickr

# using npm install
npm i flatpickr --save
Copier après la connexion

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>
Copier après la connexion

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");
Copier après la connexion
jQuery
// 如果可用,推荐使用 es 模块
import flatpickr from "flatpickr";
Copier après la connexion

Si vous utilisez jQuery, flatpickr est disponible en plugin.
// 如果在框架中使用 flatpickr ,则建议直接传递该元素
flatpickr(element, {});
// 选择器也被支持
flatpickr("#myID", {});
// 创建多个实例
flatpickr(".anotherSelector");
Copier après la connexion

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

Lecture recommandée :

JS ajoutant un résumé getter+setter

$(".selector").flatpickr(optional_config);
Copier après la connexion

Explication détaillée de l'utilisation de webpack+dev+server

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal