How to use JS date time picker-JS Tutorial-php.cn

How to use JS date time picker

php中世界最好的语言

Release： 2018-05-02 14:44:40

Original

2088 people have browsed it

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

1 2	`# using npm install` `npm i flatpickr --save`

Copy after login

Non-module environment

directly Import flatpickr file

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

Copy after login

Usage

If you use webpack, you need to import flatpickr.

1 2	`// commonjs` `const` `flatpickr =` `require("flatpickr");`

Copy after login

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

Copy after login

The following are valid methods for creating flatpickr instances.

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

Copy after login

Configuration is optional and passed in the object {}.

jQuery

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

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

Copy after login

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!