How to use JS date time picker

This time I will show you how to use JS dateTime selector, what are the precautions when using JS date and time selector, the following is a practical case, let’s take a look .

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

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:

How to operate Vue project packaging by environment

Detailed explanation of the steps to use dev-server in webpack

Detailed explanation of the use of slots/scoped in Vue

The above is the detailed content of How to use JS date time picker. For more information, please follow other related articles on the PHP Chinese website!