今天写代码时需要用一款插件来实现对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"      //最大日期

});

④   效果

⑤   说明

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

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

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

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

日期时间插件flatpickr.js使用方法的更多相关文章

  1. [转]nodejs日期时间插件moment.js

    本文转自:https://blog.csdn.net/dreamer2020/article/details/52278478 问题来源js自带的日期Date可以满足一些基本的需求,例如格式化.时间戳 ...

  2. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  3. 【Bootstrap】bootstrap-datetimepicker日期时间插件

    [bootstrap-datetimepicker] datetimepicker是一个比较方便的日期时间插件.有了这个之后,我们可以在类似于表单的地方提供一个友好的日期(时间)输入功能.官方文档:[ ...

  4. vue使用日期时间插件layDate

    项目中需要用到日期时间插件,尝试用bootstrap.element的时间插件都各有各的报错,对于一个菜鸟来说真的是很痛苦啊.终于,最后用了layDate实现了需要的功能 最终效果: 使用步骤: 1. ...

  5. dateTimePicker日期时间插件-----限定节假日调休的可选择性

    需求:在项目中需要一款这样的日期插件,可以选择年月日,时分秒,对法定节假日不能选择,因法定节假日进行的调休可以选择: 现在使用的比较多的日期插件比如:Wdatepicker,jqueryUI的date ...

  6. jquery仿ios日期时间插件

    Demo下载: 手机时间控件.zip 使用之前,请在页面中加入以下js和css: jquery-1.9.1.js mobiscroll.core-2.5.2.js mobiscroll.core-2. ...

  7. Mint-UI 的 DatetimePicker 日期时间插件的安装与使用

    简介:Mint-UI是饿了么出品的基于vue的移动端组件库(element-ui是桌面端) 官网:http://mint-ui.github.io/docs/#/zh-cn2 项目环境:vue-cli ...

  8. Ionic 日期时间插件

    1.插件安装 日期插件 时间插件 备注: 具体 查看 https://github.com/rajeshwarpatlolla/ionic-datepicker    https://github.c ...

  9. Win2008 IIS7日期时间格式更改最简便方法

    windows2008 这么高级的系统不可能改个系统的日期时间显示格式还要进注册表啊.于是有baidu,google了下终于发现了,原来还有不需要注册表的更简便方法. windows2008默认时间格 ...

随机推荐

  1. 升级后 VTE 类虚拟终端不工作

    故障现象 运行 vte 终端,如 gnome terminal.sakura 等光标不出来.xterm 可以运行. 在 xterm 终端中运行 gnome terminal 出现一下错误: grant ...

  2. JAVA I/O 字符输出流简要概括

    偷个懒,直接参考上篇字符输入流Reader的形式,其实Reader和Writer本来就大同小异: 字符输出流Writer 本篇将对JAVA I/O流中的字符输出流Writer做个简单的概括: 总得来说 ...

  3. omi-cli新版发布-升级webpack2和支持sass生成组件局部CSS

    写在前面 omi-cli是Omi的命令行工具.在v0.1.X以及之前版本中,生成出来的项目脚手架 是基于webpack1的.由于: webpack1不支持tree-shaking,webpack2 支 ...

  4. Visual Studio 2015/2017 与ASP.NET CORE 联合创建具有SPA模式的Angular2模板

    虽然注册博客园很久,但是一直没有什么可写的,真心感觉好尴尬了,这次终于找到了一点可以写,有点小兴奋和小害羞呢. 进入主题,前端SPA模式越来越受到欢迎,Core 也开始被很多企业提上日程,但是因为这个 ...

  5. laravel的延迟消息队列

    laravel的延迟消息队列 这篇来自于看到朋友转的58沈剑的一篇文章:1分钟实现"延迟消息"功能(http://mp.weixin.qq.com/s?__biz=MjM5ODYx ...

  6. Internet Information Services安装与启动

    Internet Information Services安装 1.打开控制面板——程序——启动或关闭windows功能 2.找到Internet Information Services ——将其全 ...

  7. 享受release版本发布的好处的同时也应该警惕release可能给你引入一些莫名其妙的大bug

    一般我们发布项目的时候通常都会采用release版本,因为release会在jit层面对我们的il代码进行了优化,比如在迭代和内存操作的性能提升方面,废话不多说, 我先用一个简单的“冒泡排序”体验下r ...

  8. DARK的锁链

    Description 无向图中有N个节点和两类边,一类边被称为主要边,而另一类被称为附加边.Dark有N – 1条主要边,并且Dark的任意两个节点之间都存在一条只由主要边构成的路径.另外,Dark ...

  9. 牛顿迭代法求开根号。 a^1/2_______Xn+1=1/2*(Xn+a/Xn)

    #include <stdio.h>#include <math.h>int main(void){ double a,x1=1.0,x2; printf("plea ...

  10. 移动web开发经验

    1. font-family: "Microsoft YaHei",sans-serif;/*第二个是手机的一个默认的字体 手机没有微软雅黑*/ 2.主流手机浏览器内核都为webk ...