UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

美观强大的日期时间选择器插件flatpickr

所属分类：输入-日期和时间

 106010  443  查看评论 (56)
分享到微信朋友圈
X
美观强大的日期时间选择器插件flatpickr ie兼容9
 查看演示  website  立即下载

flatpickr功能强大的日期时间选择器插件

flatpickr日期时间选择器支持移动手机，提供多种内置的主题效果，并且提供对中文的支持。它的特点还有：

  • 使用SVG作为界面的图标。

  • 兼容jQuery。

  • 支持对各种日期格式的解析。

  • 轻量级，高性能，压缩后的版本仅6K大小。

  • 对手机原生日期格式的支持。

下图说明了使用jQuery UI、Bootstrap、packadate.js和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等。

参数类型默认值描述
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日期将会被解析、格式化和显示为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
s秒0 - 59
KAM/PMAM or PM


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


相关插件-日期和时间
查看更多

仿IOS移动端日历

 超好用美观的移动端日历，兼容安卓和苹果及微信浏览器
  日期和时间
 45474  419

纯JS彩色方块倒计时插件

 纯JS实现，指定日期倒计时，60秒倒计时，指定日期到今天的时间
  日期和时间
 16239  227

翻牌时钟效果三种效果

 翻牌时钟效果三种效果
  日期和时间
 48226  451

时间插件lhgcalendar

 lhgcalendar是一功能强大的简单迷你并且高效的弹出日历组件,基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+.
  日期和时间
 50083  355

讨论这个项目（56）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    少曳-YIY 0
    2020/10/10 11:53:16
    手机版得语言怎么控制啊 回复
    头像我老公 0
    2018/12/20 14:50:58
    请问选择了时间日期 在js里面怎么获取到所选择的日期和时间？ 回复
    DSP 0
    2018/11/29 15:38:55
    我添加了一个日历图标，为什么点击日历图标的的时候没有弹出日历呢 回复
    雪小痕 0
    2018/9/17 11:23:47
    没有flatpickr.css这个文件呀？？？ 回复
    moel 0
    2018/9/17 10:50:27
    选择器出现的位置如何设置 回复
    风残落叶 0
    2018/8/27 13:44:17
    默认时间怎么改为00：00 回复
    QQ号 0
    2018/6/11 15:44:26
    怎样现实中文
        Glu TtoNy-Ⅱ0
        2018/7/28 16:09:40
        解决了吗？遇到这个问题了
        Glu TtoNy-Ⅱ1
        2018/7/28 16:14:37
        原来直接把flatpickr.l10n.zh，js文件引一下就好了
    回复
    B C G ~ 0
    2018/5/9 16:47:54
    $('#id').flatpickr({
    defaultDate: "2020-09-20",
});

    这样设置初始日期

        格格0
        2018/5/23 11:25:12
        可以精确到时分秒么
        格格0
        2018/5/23 11:26:13
        默认日期不想写死了,而是当前日期的 00:00:00
        格格0
        2018/5/23 17:50:30
        我今天研究了好久,差不多弄明白了, 那个开始时间跟结束时间限制的问题,就是得触发才能有限制,如果你的截止时间是个固定值,也是触发不了的开始时间的限制的,
        mantou0
        2018/11/16 20:04:38
        var minDate = ""
var maxDate = ""
$(".startTime").flatpickr({
    mode: "single",
    enableTime: true,
    time_24hr: true,
    dateFormat: "Y-m-d H:i:S",
    onChange: function(selectedDates) {
        minDate = selectedDates[0].getTime() - 24 * 60 * 60 * 1000
        maxDate = selectedDates[0].getTime() + 24 * 60 * 60 * 1000
        $('.endTime').flatpickr({
            mode: "single",
            enableTime: true,
            time_24hr: true,
            dateFormat: "Y-m-d H:i:S",
            minDate: minDate,
            maxDate: maxDate
        }).redraw()
    }
});
    回复
    No dream 0
    2018/4/28 11:26:33
    年份和星期，可以用中文显示吗 回复
    The Wind Rises 0
    2018/3/23 11:36:48
    请教一下，我做的是两个input选择日期范围，想做一个清空已选择的时间范围，应该怎么做才能即清空了时间，又不改变日期范围的设置啊？请问有哪位大神知道？ 回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复