日期插件-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也提供了内置的,但样式方面不好看,只好 ...
随机推荐
- CSS实现文字换行
强制不换行:div{ white-space:nowrap; } 自动换行: div{ word-wrap:break-word; word-break:normal; } 强制不换行 white-s ...
- mybatis 之 占位符#{} 和 ${}
#{}占位符用来设置参数,参数的类型可以有3种,基本类型,自定义类型,map基本类型作为参数,参数与占位符中的名称无关. <select id="findById" para ...
- ios应用版本号设置规则
版本号的格式:v<主版本号>.<副版本号>.<发布号> 版本号的初始值:v1.0.0 管理规则: 主版本号(Major version) 1. 产品的主体构件进行 ...
- bootstrap表格固定表头,表格内容滚动条滚动显示
直接贴代码--- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- 【Jenkins】Jenkins权威指南英文版:jenkins-the-definitive-guide.pdf
原文链接:http://www.bogotobogo.com/DevOps/Jenkins/images/Intro_install/jenkins-the-definitive-guide.pdf
- js判断文件类型大小并给出提示
上传文件是工作中常用的功能,不同的场景对不同的文件类型和文件大小都有不同的要求: <form id="uploadForm" method="post" ...
- iOS 环信集成项目应用
环信iOS端3.0版本集成记录--聊天界面篇 环信离线推送证书... 1,环信处在后台的时候,消息的接收与推送 离线发推送 配置属性 EMCallOptions *options = [[EMClie ...
- C#基础在using中创建对象
在using中创建的对象的类必须是实现了IDispose接口的类,示例代码如下: static void Main(string[] args) { Method(); Console.WriteLi ...
- akka-stream与actor系统集成以及如何处理随之而来的背压问题
这几天上海快下了五天的雨☔️☔️☔️☔️,淅淅沥沥,郁郁沉沉. 一共存在四个api: Source.actorRef,返回actorRef,该actorRef接收到的消息,将被下游消费者所消费 ...
- php编码的一些小规范
本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/104 最近在整理线上的hhvm warning,虽然每天产生百万 ...