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. 【SqlServer】【问题收集】删除同一张表中完全相同的记录

    1   概述 在Sqlserver中,当通过SqlServer设计器删除同一张表中两条完全相同的记录时,会弹出如下提示: 点击“是” 弹出如下提示,不让删除 2   问题解决 这个问题很简单,用DEL ...

  2. angular自定义分页组件(实用)

    功能描述:分页,点击按钮或者下一页获取分页接口,同时active到对应页码. html模块: <page page-count="totalPage" on-click-pa ...

  3. 关于IntelliJ IDEA有时候快捷键无效的说明

    1.这个原因最大的因素可能就是 搜狗输入法了, 关闭搜狗输入法,ok, 2.也可能是qq快捷键冲突,关闭它. 3.也可能是搜狗输入法快捷键冲突,关闭它.

  4. python文件操作及os模块常用命令

    1.文件打开 文件句柄 = open('文件路径', '模式') 2.文件操作 打开文件时,需要指定文件路径和以何等方式打开文件,打开后,即可获取该文件句柄,日后通过此文件句柄对该文件操作. 三种基本 ...

  5. 《计算机程序的构造和解释(第2版)》【PDF】下载

    <计算机程序的构造和解释(第2版)>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382255 内容简介 <计算机程序的构造 ...

  6. LINUX:alias命令详解

    发现目前安装的g++并没有开启选项 -std=c++11,无法使用c++11的新标准及其中的列表初始化.搜索后得到解决方法:键入:alias  g++="g++ -std=c++11&quo ...

  7. 通过SQL创建一个有主键自动递增有默认值不为空有注释的表

    -- create database db_std_mgr_sys; use db_std_mgr_sys; create table student( std_id bigint not null ...

  8. js实现文字逐个出现动效

    效果 首先看下效果,这是在h5页面中常见的一中文字展现方式,那么是怎么实现的呢?其实很简单 思路 用一个定时器将预制的文字通过.substring(0, i)方法不断的赋给要显示的区域,i在定时器里面 ...

  9. c#发送get请求

    c#发送get请求爬取网页 关键点:在控制台中发送一个get请求,将响应的内容写入文件流中保存html格式 static void Main(string[] args) { string url = ...

  10. 点分治X2

    1.聪聪可可 点分治板子 然而想那个 t1[1]*t1[2]*2+t1[0]*t1[0]想了好久 就是最基本的组合方法 毕竟(2,5)和(5,2)可是要算两次的 画画图就好了 (不要像我一样盯着大佬们 ...