flatpickr功能强大的日期时间选择器插件
来源:互联网 发布:软件license 设计方案 编辑:程序博客网 时间:2024/04/20 02:39
flatpickr日期时间选择器支持移动手机,提供多种内置的主题效果,并且提供对中文的支持。它的特点还有:
使用SVG作为界面的图标。
兼容jQuery。
支持对各种日期格式的解析。
轻量级,高性能,压缩后的版本仅6K大小。
对手机原生日期格式的支持。
下图说明了使用jQuery UI、Bootstrap、packadate.js和flatpickr拉齐制作一个日期时间选择器时,所需要的文件尺寸大小:
下图是flatpickr日期时间选择器的各种主题效果:
配置参数
在配置参数中,所有的类型为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如果为true,日期将会被解析、格式化和显示为UTC格式。prevArrowstring<向前箭头图标。nextArrowstring>向后箭头图标。日期格式字符
字符描述示例d月份中的天数,如果不满2个数字的会前导0。01 - 31D一个星期中某一天的简写文本表示Mon - Sunl(小写的L)一个星期中某一天的文本表示Sunday - Saturdayj不带前导0的月份中的天数1 - 31J带序号后缀,不带前导0的月份中的天数1st, 2nd, to 31stw使用数字来代表星期中的某一天0 (星期天) - 6 (星期六)F月份的完整文本表示January - Decemberm使用数字来表示月份,前导带0。01 - 12n使用数字来表示月份,前导不带0。1 - 12M月份的简写文本表示Jan - DecU时间戳1413704993y两个数字代表的年99 or 03Y4个数字代表的年1999 or 2003
时间格式字符
字符描述示例H24小时制00 to 23h12小时制1 to 12i分钟00 to 59S秒(不满2位数补0)00 to 59s秒0 - 59KAM/PMAM or PM
关于该日期时间选择器的本地化和其它一些使用方法,请参考演示页面中的DEMO。
flatpickr日期时间选择器插件的github地址为:https://github.com/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等。
参数类型默认值描述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 - 31D一个星期中某一天的简写文本表示Mon - Sunl(小写的L)一个星期中某一天的文本表示Sunday - Saturdayj不带前导0的月份中的天数1 - 31J带序号后缀,不带前导0的月份中的天数1st, 2nd, to 31stw使用数字来代表星期中的某一天0 (星期天) - 6 (星期六)F月份的完整文本表示January - Decemberm使用数字来表示月份,前导带0。01 - 12n使用数字来表示月份,前导不带0。1 - 12M月份的简写文本表示Jan - DecU时间戳1413704993y两个数字代表的年99 or 03Y4个数字代表的年1999 or 2003时间格式字符
字符描述示例H24小时制00 to 23h12小时制1 to 12i分钟00 to 59S秒(不满2位数补0)00 to 59s秒0 - 59KAM/PMAM or PM阅读全文
0 0
- flatpickr功能强大的日期时间选择器插件
- flatpickr时间插件
- 24款最好的jQuery日期时间选择器插件
- JQ插件:日期时间选择器date picker
- bootstrap的日期选择器插件
- 带时间的日期选择器
- Html5添加用户选择一个日期时间范围的日期选择器插件教程
- 纯js可定制的跨浏览器日期时间选择器插件
- 不依赖于第三方库的日期时间选择器插件--Rome
- bootstrap之datetimepicker(日期时间选择器)插件详细使用方法
- 基于jQuery插件的日期选择器
- Java GUI实现的日期时间选择器
- 仿Iphone样式的时间、日期选择器
- Android仿iPhone的日期时间选择器
- Android 时间日期选择器的用法
- 基于Bootstrup的jQuery日期时间选择器
- 日期、时间选择器的基本使用
- 日期和时间选择器的使用
- Entity Framework Code First级联删除
- [JZOJ5415]【NOIP2017提高A组集训10.22】公交运输
- vue-cli中的webpack配置
- React Native 解决Image 圆角在安卓上面没效果
- Vector的size和capacity的分别以及vector插入的顺序
- flatpickr功能强大的日期时间选择器插件
- js数组查重
- 大学四年如何成为一个合格的程序猴
- 同步阻塞的BIO、同步非阻塞的NIO、异步非阻塞的AIO
- 你真的理解了数组指针和指针数组吗?
- 用python读写excel的强大工具:openpyxl
- 接口性能测试报告
- Ubuntu/Kali系统如何安装qt5
- VX模态框的使用