Implement JS date time picker

This time I will bring you the implementation of JS date time selector , and what are the precautions for implementing JS date 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 libraries. 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 implement scaffolding optimization in webpack

How to avoid the misunderstandings of using Dom in Angular

Detailed steps for webpack v4 from dev to prd

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