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的更多相关文章

  1. 轻量级的日期插件--datebox

    jquery的日期插件有好几款,H5中的input也可以自带日期选择.但为什么要再写一个,有两个理由,一个是引用的文件太大,而有时候只需要很简单的功能,二个是想加一些自定义的效果不好改. 我写的这个功 ...

  2. My97DatePicker日期插件

    My97DatePicker是一款优秀的日期插件,它可以很方便地实现各种日期选择效果,博得广大IT开发人员的青睐. 下面来讲讲它的常用功能及设置方法. 方法/步骤   先来最简单的配置方法: (1)下 ...

  3. 基于JS功能强大的日期插件Kalendae

    开发中需要一个日期插件,可以在zepto下使用,可以选择日期段,可以设置不可选日期 找到一个完全满足的,并且基于JS不依赖于任何库. 在线演示:http://chipersoft.com/Kalend ...

  4. jsp日期插件My97DatePicker

    jsp日期插件My97DatePicker 强大的日期控件 使用方便简单 (2010-10-30 18:59:12) 转载▼ 标签: js javascript 日期插件 jsp it 分类: jqu ...

  5. jquery ui bootstrap日期插件

    http://blog.csdn.net/php_897721669/article/details/7404527 搜索“jquery ui日期插件怎么显示年份”? $("#datepic ...

  6. (转)JQM 日期插件 mobiscroll Demo

    (原)http://www.wglong.com/main/artical!details?id=11  JQM 日期插件 mobiscroll Demo 2013-04-25 / 分类:Jquery ...

  7. (转)jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明

    (原)http://www.cnblogs.com/hxling/archive/2012/12/12/2814207.html jQuery Mobile 移动开发中的日期插件Mobiscroll ...

  8. bootstrap的日期插件datetimepicker有问题

    bootstrap的日期插件datetimepicker在chrome中会出现掉下来的现象,而且一直没找到原因,下载最新版的插件直接在各个浏览器中都会掉下来, 问题一直解决不了,转而换其他插件 htt ...

  9. jQuery Mobile 移动开发中的日期插件Mobiscroll使用说明

    近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊. 日期插件JQM也提供了内置的,但样式方面不好看,只好 ...

随机推荐

  1. 自学Python1.1-简介

    1.python语言介绍 python的创始人:Guido Van Rossum 2.python是一门什么样的语言 2.1  编程语言主要从以下几个角度进行分类:编译型,静态型,动态性,强类型定义语 ...

  2. JavaSe:UncaughtExceptionHandler

    Java中,出现对于异常的处理,通常是使用try{}catch()来捕获处理的.但是在使用trycatch时,未必会将所有的异常都捕获到,所以方法声明时可以有throws xxxException. ...

  3. Python编程和 Lua编程的比较

    Python编程和 Lua编程的比较 2016.4.21 定义函数: python: def functionname( parameters ): "函数_文档字符串" func ...

  4. 图片验证码(Struts2中使用)

    写在前面: 最近在项目中做了一个登录页面,用到了图片验证码的功能,所以记录一下.方便之后再有用到,直接拿来用即可.其实图片验证码的生成都是有固定步骤的,网上也有很多的例子,有的时候,如果不想深究,都是 ...

  5. AutoLayout的几种方法

    1.XIB 2.Fram 3.屏幕比例适配(个人比较推荐)  iOS屏幕适配(尺寸适配) 4.NSLayoutConstraint. 5.Masonry  概述 使用 Objective-C 纯代码编 ...

  6. Neo4j学习笔记(1)——使用API编写一个Hello World程序

    项目的创建及配置 因为Neo4j依赖的jar包比较多,所以推荐使用Maven来管理. 首先创建一个Maven Project,添加依赖: <dependency> <groupId& ...

  7. which 命令详解

    一.which 作用: which 命令用于查找并显示给定命令的绝对路径,环境变量PATH中保存了查找命令时需要遍历的目录, which 命令会在环境变量$PATH 设置的目录里查找符合条件的文件.也 ...

  8. Delete 命令详解

    cp:复制文件 /cp -r:复制目录  /bin/cp -f: 复制文件并覆盖已有文件(写命令的绝对路径/bin/)  /cp /ect/passwd .:将其他文件复制到当前目录  /-n :不要 ...

  9. MySQL 单实例编译安装 以及多实例安装简介

    这是基本的安装教程,与牛逼的大神无关,或许是牛逼大神不用看就会安装吧. CentOS 6.5 Final  x86_64 一.预安装软件包 1.开发包组合安装 yum groupinstall &qu ...

  10. github emoji 表情列表

    最新emoji大全:emoji列表 emoji-list emoji表情列表 目录 人物 自然 事物 地点 符号 人物 :bowtie: :bowtie: