日期时间插件flatpickr.js使用方法

时间：2023-12-18 22:35:32

今天写代码时需要用一款插件来实现对input输入时间的格式控制，找到了两款功能合适而且比较美观的插件：基于Bootstrap的DateTimePicker.js和flatpickr.js插件。一开始先找到DateTimePicker.js插件，本来打算使用的，结果发现使用webpack安装该插件后，依赖包里的样式文件是DateTimePicker.less格式，而非是DateTimePicker.css格式，而且该插件很久没有更新了，于是就放弃了，找到了flatpickr.js插件。

使用该插件方法：

①   引入样式文件和js文件

<link rel="stylesheet" href="css/flatpickr.css">

<link rel="stylesheet" href="css/bootstrap.css">

<script type="text/javascript" src="js/jquery-2.0.3.js"></script>

<script type="text/javascript" src="js/flatpickr.js"></script>

flatpickr.css和flatpickr.js必须引入，bootstrap.css和jquery-2.0.3.js视使用情况决定是否引入。

②   写HTML代码

<input id="myID" value="2017-01-01" class="form-control">

value特性是默认值。

③   js代码

$("#myID").flatpickr({         //初始化插件

    minDate: "2017-01-01",     //最小日期

    maxDate: "2020-12-31"      //最大日期

});

④   效果

日期时间插件flatpickr.js使用方法

⑤   说明

以上js代码只是简单地初始化插件，并设置最大日期和最小日期两个参数。其余更多更复杂的效果可以参考文档实现，这里只是讲解最基本的如何使用该插件。

jQuery插件库： http://www.jq22.com/jquery-info9859。

文档： https://chmln.github.io/flatpickr/。

github： https://github.com/chmln/flatpickr。

相关文章