日期时间插件flatpickr.js使用方法
2017-04-28 22:58
2943 查看
今天写代码时需要用一款插件来实现对input输入时间的格式控制,找到了两款功能合适而且比较美观的插件:基于Bootstrap的DateTimePicker.js和flatpickr.js插件。一开始先找到DateTimePicker.js插件,本来打算使用的,结果发现使用webpack安装该插件后,依赖包里的样式文件是DateTimePicker.less格式,而非是DateTimePicker.css格式,而且该插件很久没有更新了,于是就放弃了,找到了flatpickr.js插件。
使用该插件方法:
① 引入样式文件和js文件
flatpickr.css和flatpickr.js必须引入,bootstrap.css和jquery-2.0.3.js视使用情况决定是否引入。
② 写HTML代码
value特性是默认值。
③ js代码
④ 效果
⑤ 说明
以上js代码只是简单地初始化插件,并设置最大日期和最小日期两个参数。其余更多更复杂的效果可以参考文档实现,这里只是讲解最基本的如何使用该插件。
jQuery插件库: http://www.jq22.com/jquery-info9859。
文档: https://chmln.github.io/flatpickr/。
github: https://github.com/chmln/flatpickr。
使用该插件方法:
① 引入样式文件和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" //最大日期 });
④ 效果
⑤ 说明
以上js代码只是简单地初始化插件,并设置最大日期和最小日期两个参数。其余更多更复杂的效果可以参考文档实现,这里只是讲解最基本的如何使用该插件。
jQuery插件库: http://www.jq22.com/jquery-info9859。
文档: https://chmln.github.io/flatpickr/。
github: https://github.com/chmln/flatpickr。
相关文章推荐
- WdatePicker.js时间日期插件的使用方法
- flatpickr功能强大的日期时间选择器插件
- js中使用eval()方法将字符串转换成日期格式、并获取指定时间的日期
- jQuery日期和时间插件(jquery-ui-timepicker-addon.js)中文破解版使用
- 关于时间日期插件引用使用方法
- 日期插件WdatePicker.js的使用方法
- jQuery日期和时间插件(jquery-ui-timepicker-addon.js)中文破解版使用
- JS 替换和时间插件的结合使用方法
- bootstrap之datetimepicker(日期时间选择器)插件详细使用方法
- My97DatePicker日期插件WdatePicker.js的使用方法
- JS 替换和时间插件的结合使用方法
- flatpickr功能强大的日期时间选择器插件
- WdatePicker,js日期插件 ,时间相加
- struct tm 和 time_t 时间和日期的使用方法(转)
- js关于时间日期的一些方法汇总
- WdatePicker.js日期组件的使用方法
- struct tm 和 time_t 时间和日期的使用方法(转)
- 按需加载图片的 jQuery 插件 lazyload.js 使用方法详解
- struct tm 和 time_t 时间和日期的使用方法(转)
- 美国的时间格式 -- 复杂格式的日期转换 使用Date.parse(“复杂的格式”)方法。