flatpickr日期时间选择器支持移动手机,提供多种内置的主题效果,并且提供对中文的支持。它的特点还有:
使用SVG作为界面的图标。
兼容jQuery。
支持对各种日期格式的解析。
轻量级,高性能,压缩后的版本仅6K大小。
对手机原生日期格式的支持。
下图说明了使用jQuery UI、Bootstrap、packadate.js和flatpickr拉齐制作一个日期时间选择器时,所需要的文件尺寸大小:
下图是flatpickr日期时间选择器的各种主题效果:
配置参数
在配置参数中,所有的类型为string
或boolean
的参数都可以通过data-
属性在HTML标签中进行设置。例如:data-min-date
、data-default-date
、data-default-date
等。
日期格式字符
时间格式字符
关于该日期时间选择器的本地化和其它一些使用方法,请参考演示页面中的DEMO。
flatpickr日期时间选择器插件的github地址为:/chmln/flatpickr。
使用方法:
在页面中引入flatpicker.css和flatpicker.js文件。
<link rel="stylesheet" type="text/css" href="/path/to/flatpickr.css"><script src="/path/to/flatpickr.js"></script>
HTML示例:
<input id="myID">
初始化插件:
document.getElementsByClassName("myClass").flatpickr({..config});document.getElementById("myID").flatpickr(); // 两种js初始化方法$(".calendar").flatpickr(); // jQuery初始化方法
配置参数
在配置参数中,所有的类型为string或boolean的参数都可以通过data-属性在HTML标签中进行设置。例如:data-min-date、data-default-date、data-default-date等。
日期格式字符
时间格式字符
关于该日期时间选择器的本地化和其它一些使用方法,请参考演示页面中的DEMO。