日期插件-flatpickr
github的仓库地址:https://github.com/chmln/flatpickr

手册地址:http://www.htmleaf.com/Demo/201608213895.html 详细的demo 演示;
安装:
npm install flatpickr
bower install flatpickr-calendar
使用方法
<link rel="stylesheet" type="text/css" href="/path/to/flatpickr.css">
<script src="/path/to/flatpickr.js"></script>
HTML结构
<input id="flatpickr-tryme" placeholder="......">
<input id="flatpickr-tryme" placeholder="......" data-default-date="today"> // 默认取今天
初始化插件
// 通过class名称,返回一个数组
document.getElementsByClassName("myClass").flatpickr({..config}); // 通过ID
document.getElementById("myID").flatpickr(); // 使用jQuery
$(".calendar").flatpickr();
配置参数
(部分如下)

我的代码演示:
$("#calendar").flatpickr({
defaultDate: new Date(new Date() - 1000*24*3600 ),//默认昨天,计算日期表达式
onChange: function(dateObj, dateStr, instance) {
var day = Math.floor((new Date() - new Date(dateObj))/24000/3600);
console.log(day)
},
});
日期插件-flatpickr的更多相关文章
- 轻量级的日期插件--datebox
jquery的日期插件有好几款,H5中的input也可以自带日期选择.但为什么要再写一个,有两个理由,一个是引用的文件太大,而有时候只需要很简单的功能,二个是想加一些自定义的效果不好改. 我写的这个功 ...
- My97DatePicker日期插件
My97DatePicker是一款优秀的日期插件,它可以很方便地实现各种日期选择效果,博得广大IT开发人员的青睐. 下面来讲讲它的常用功能及设置方法. 方法/步骤 先来最简单的配置方法: (1)下 ...
- 基于JS功能强大的日期插件Kalendae
开发中需要一个日期插件,可以在zepto下使用,可以选择日期段,可以设置不可选日期 找到一个完全满足的,并且基于JS不依赖于任何库. 在线演示:http://chipersoft.com/Kalend ...
- jsp日期插件My97DatePicker
jsp日期插件My97DatePicker 强大的日期控件 使用方便简单 (2010-10-30 18:59:12) 转载▼ 标签: js javascript 日期插件 jsp it 分类: jqu ...
- jquery ui bootstrap日期插件
http://blog.csdn.net/php_897721669/article/details/7404527 搜索“jquery ui日期插件怎么显示年份”? $("#datepic ...
- (转)JQM 日期插件 mobiscroll Demo
(原)http://www.wglong.com/main/artical!details?id=11 JQM 日期插件 mobiscroll Demo 2013-04-25 / 分类:Jquery ...
- (转)jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明
(原)http://www.cnblogs.com/hxling/archive/2012/12/12/2814207.html jQuery Mobile 移动开发中的日期插件Mobiscroll ...
- bootstrap的日期插件datetimepicker有问题
bootstrap的日期插件datetimepicker在chrome中会出现掉下来的现象,而且一直没找到原因,下载最新版的插件直接在各个浏览器中都会掉下来, 问题一直解决不了,转而换其他插件 htt ...
- jQuery Mobile 移动开发中的日期插件Mobiscroll使用说明
近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊. 日期插件JQM也提供了内置的,但样式方面不好看,只好 ...
随机推荐
- 【CODEFORCES】 A. Dreamoon and Sums
A. Dreamoon and Sums time limit per test 1.5 seconds memory limit per test 256 megabytes input stand ...
- 用vue做app内嵌页遇到的坑
公司要求用vue做一个微信端的网站,其中还包含一些app的内嵌页.开始的时候没想那么多,就直接用vue-cli搭了一个单页的vue项目,可随着项目越做越大,页面越来越多,问题就开始暴露出来了. 众所周 ...
- Elasticsearch常用基础操作
1.获得集群中的节点列表: curl 'localhost:9200/_cat/nodes?v' 2.获得所有索引: curl 'localhost:9200/_cat/indices?v' 3.创建 ...
- JavaSe:Comparator
今天,公司里有一个萌萌的妹子问我java 中的comparator是怎么回事.参数分别是什么,返回值又是什么,为此,我写了一个简单的程序告诉了她: public static void main (S ...
- .NET 实现DES加密解密处理
.NET 实现DES加密解密处理 using System; using System.Text; using System.Security.Cryptography; using System.I ...
- Laravel学习笔记(二)
解决了类自动加载的问题,剩下的问题就是看文档了,laravel的官方文档虽然简单,但是却包含了很多基础知识,学习Laravel最好先看看官方文档,我感觉帮助很大,因为laravel框架的源码看起来并不 ...
- springboot 入门四-时间类型处理
springboot 自带了jackson来处理时间,但不支持jdk8 LocalDate.LocalDateTime的转换. 对于Calendar.Date二种日期,转换方式有二种: 一.统一app ...
- iOS UI特效
1.iOS特效 a.对应APP中的基本动作分三类: 1.指向性动效(滑动,弹出等) 2.提示性动效(滑动删除,下拉刷新等) 3.空间扩展(翻动,放大等) b.这类动效在设计过程中需要主意几点: 1.系 ...
- Java定时器应用
在Java多线程中,有的时候,我们需要按照指定间隔时间来执行一些任务,这时,我们就要用到定时器.我们在这里以Java中的Timer定时器为例,演示定时器的应用. 请看下述代码: import java ...
- SharedPreferences 存List集合,模拟数据库,随时存取
PS:SharedPreferences只要稍微学过一点就会用,他本身通过创建一个Editor对象,来存储提交,而editor可以存的格式为 他里面可以存一个Set<String> Set ...