Detailed explanation of using JS date and time selector

This time I bring you JS dateTime selectorDetailed explanation of use, what are the Notes when using JS date and time selector, the following is a practical case, let’s take a look .

flatpickr is a lightweight, lean-focused, UX-driven and extensible JavaScript datetime picker.

Download Demo GitHub

flatpickr does not depend on any library. Smaller UI but lots of themes. A rich API and event system make it suitable for any environment. Available with webpack and as a jQuery plugin.

Installation

Install the flatpickr module

Use NPM to install the flatpickr module. Package management tool: https://www.npmjs.com/package/bower-npm-resolver

# using npm install
npm i flatpickr --save

Non-module environment

directly Import flatpickr file

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

Usage

If you use webpack, you need to import flatpickr.

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

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

The following are valid methods for creating flatpickr instances.

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

Configuration is optional and passed in the object {}.

jQuery

If you use jQuery, flatpickr is available as a plugin.

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

Summary

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

vue axios production login request interception

detailed explanation of webpack-dev-server usage (with code)

The above is the detailed content of Detailed explanation of using JS date and time selector. For more information, please follow other related articles on the PHP Chinese website!