中国最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2

Jquery集合

浏览声明

UI

分类插件

模态框

滚动轮播

拖拉排序

多选框

滚动条

Loading

移动端

提示框

功能性插件

瀑布流

  • CSS3立方体小照片
  • D3.js logo可视化库 D3.js
  • 图片处理

    banner特效

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

    阅读 (5927)

    ie兼容9
    插件描述:jQuery日期时间选择器插件flatpicker,功能强大,有多种主题,多国语言支持中文。

    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初始化方法

    配置参数

    在配置参数中,所有的类型为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日期将会被解析、格式化和显示为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。






    关闭
    程序员人生