900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > flatpickr功能强大的日期时间选择器插件

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

时间:2022-03-19 19:30:47

相关推荐

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

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

使用SVG作为界面的图标。

兼容jQuery。

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

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

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

下图说明了使用jQuery UI、Bootstrap、packadate.js和flatpickr拉齐制作一个日期时间选择器时,所需要的文件尺寸大小:

下图是flatpickr日期时间选择器的各种主题效果:

配置参数

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。