纯JavaScript扁平风格日期时间选择器

helloweba.com 时间:2017年03月07日 22:06 标签: 日历  日期选择器 

Flatpickr是一款功能强大的纯JS扁平风格日期时间选择器插件。该日期时间选择器支持移动手机,提供多种内置的主题效果,使用SVG作为界面的图标,支持对各种日期格式的解析。

安装

可以通过npm或bower来安装flatpickr日期时间选择器插件。

npm install flatpickr 
bower install flatpickr-calendar 

使用方法

在页面中引入flatpickr.css和flatpickr.js文件。

<link rel="stylesheet" type="text/css" href="/path/to/flatpickr.css">
<script src="/path/to/flatpickr.js"></script>  

HTML结构

一个最简单的日期时间选择器的HTML结构如下:

<input id="flatpickr-tryme" placeholder="......"> 

初始化插件

有多种方法可以实例化一个日期时间选择器。如下:

// 通过class名称,返回一个数组
document.getElementsByClassName("myClass").flatpickr({..config});
 
// 通过ID
document.getElementById("myID").flatpickr();
 
// 使用jQuery
$(".calendar").flatpickr();  

配置参数

在配置参数中,所有的类型为stringboolean的参数都可以通过data-属性在HTML标签中进行设置。例如:data-min-datedata-default-datedata-default-date等。

参数类型默认值描述
altFormatstring"F j, Y"altInput的日期格式。
altInputBooleanfalse是否使用某种用户友好的方式来显示日期时间。
altInputClassString""添加到input上的自定义class类。例如bootstrap用户可能需要添加一个form-control class。
allowInputbooleanfalse是否允许用户直接在输入框中输入日期。
clickOpensbooleantrue是否在点击输入框时打开日期时间选择界面。如果你想通过手动.open()方法来打开,该选项设置为false
dateFormatstring"Y-m-d"设置日期显示格式。
defaultDateString/Date Objectnull设置一个初始的日期。
disablearray[]被禁用的日期。
enableTimebooleanfalse是否启用时间选择。
enableSecondsbooleanfalse在时间选择器中是否可以选择秒。
noCalendarbooleanfalse是否隐藏日历。
hourIncrementinteger1小时输入框的步长。
minuteIncrementinteger5分钟输入框的步长。
inlinebooleanfalse是否以内联的方式显示日历。
staticbooleanfalse日期选择器位于包裹容器的位置。
wrapBooleanfalse包裹元素。
maxDateStringnull用户可以选择的最大日期。
minDateStringnull用户可以选择的最小日期。
onChangefunction(dateObject, dateString)null每次日期被选择的时候都触发该函数。
onOpenfunction(dateObject, dateString)null每次日历被打开时都会触发该函数。
onClosefunction(dateObject, dateString)null每次日历被关闭时都会触发该函数。
parseDatefunctionfalse接收一个日期字符串并返回一个日期对象。
shorthandCurrentMonthbooleanfalse以简写方式显示月份
weekNumbersbooleanfalse是否在日历中显示星期数。
time_24hrbooleanfalse是否以24小时格式来显示时间。
utcbooleanfalse如果为true,日期将会被解析、格式化和显示为UTC格式。
prevArrowstring<向前箭头图标。
nextArrowstring>向后箭头图标。

日期格式字符

字符描述示例
d月份中的天数,如果不满2个数字的会前导0。01 - 31
D一个星期中某一天的简写文本表示Mon - Sun
l(小写的L)一个星期中某一天的文本表示Sunday - Saturday
j不带前导0的月份中的天数1 - 31
J带序号后缀,不带前导0的月份中的天数1st, 2nd, to 31st
w使用数字来代表星期中的某一天0 (星期天) - 6 (星期六)
F月份的完整文本表示January - December
m使用数字来表示月份,前导带0。01 - 12
n使用数字来表示月份,前导不带0。1 - 12
M月份的简写文本表示Jan - Dec
U时间戳1413704993
y两个数字代表的年99 or 03
Y4个数字代表的年1999 or 2003

时间格式字符

字符描述示例
H24小时制00 to 23
h12小时制1 to 12
i分钟00 to 59
S秒(不满2位数补0)00 to 59
s0 - 59
KAM/PMAM or PM

关于该日期时间选择器的本地化和其它一些使用方法,请参考演示DEMO。

flatpickr日期时间选择器插件的github地址为:https://github.com/chmln/flatpickr

0条评论

顶部 反馈 二维码 底部
扫一扫

扫描二维码用手机看文章