详细介绍
flatpickr是轻量的、功能齐全的沒有依赖项的javascript日期选择器，几乎每一个大中型SPA或新项目都涉及到日期和時间输入。电脑浏览器的远程服务器完成不是一致的，在功用上也是有局限的。大部分别的库都规定引进很多的依赖项，如jQuery、Bootstrap和tag.js。而flatpickr是一个零依赖、轻量但功能齐全的日期选择器！
Github和文本文档
github：
https://github.com/flatpickr/flatpickr
文档：
https://flatpickr.js.org/examples/
特点
- 沒有依赖(没有松垮的包)
- 简易，雅致UI
- 日期 時间输入
- 范畴选择
- 可以选择好几个日期
- 可以作为時间选择器
- 以个性化格式表明日期
- 应用随意逻辑性轻轻松松禁止使用特殊日期、日期范畴或一切日期
- 周数
- 50种语言表达
- 8个多种多样的主题风格
- 诸多软件
- 可用以React、Angular、Vue、Ember等大量的库
官方网实例
官方网文本文档中给予了十分丰富的案例
- 基本上的使用方法，无需配备
- 時间
{
enableTime: true,
dateFormat: \"Y-m-d H:i\",
}
- 个性化的表明
altInput掩藏初始输入并建立一个新输入。在日期选择时，初始输入将包括一个Y-m-d.字符串数组，而altInput将以更清楚、可修改的格式表明日期。
{
altInput: true,
altFormat: \"F j, Y\",
dateFormat: \"Y-m-d\",
}
- 选择操纵
- 1、defaultDate（初始值）
- 2、minDate（可选极小值）
- 3、maxDate（可选最高值）
- 4、enable/disable（可以选择或是不可以选择的日期二维数组）
如：
{
minDate: \"2020-01\"
}
{
disable: [\"2025-01-30\", \"2025-02-21\", \"2025-03-08\", new Date(2025, 4, 9) ],
dateFormat: \"Y-m-d\",
}
{
dateFormat: \"Y-m-d\",
disable: [
{
from: \"2025-04-01\",
to: \"2025-05-01\"
},
{
from: \"2025-09-01\",
to: \"2025-12-01\"
}
]
}//限定选择的日期范畴
- 选择好几个日期
{
mode: \"multiple\",
dateFormat: \"Y-m-d\"
}
- 日期范畴选择
{
mode: \"range\"
}
- 時间选择器
{
enableTime: true,
noCalendar: true,
dateFormat: \"H:i\",
}
- 内联表明
{
inline: true
}
- 显示周
{
weekNumbers: true,
/*
可以根据重写getWeek自定义显示周
*/
// getWeek: function (dateObj) {
// // ...
// }
});
- 外界控制
<div class=\"flatpickr\"> <input type=\"text\" placeholder=\"Select Date..\" data-input> <!-- input is mandatory --> <a class=\"input-button\" title=\"toggle\" data-toggle> <i class=\"icon-calendar\"></i> </a> <a class=\"input-button\" title=\"clear\" data-clear> <i class=\"icon-close\"></i> </a> </div>
{
wrap: true
}
- 文化整合
<script src=\"https://npmcdn.com/flatpickr/dist/l10n/zh.js\"></script>
flatpickr(\"#mypick\", {
\"locale\": \"zh\"
});
主题风格
引进方式：
<link rel=\"stylesheet\" type=\"text/css\" href=\"https://npmcdn.com/flatpickr/dist/themes/dark.css\">
- 黑色主题
- 深蓝色
<link rel=\"stylesheet\" type=\"text/css\" href=\"https://npmcdn.com/flatpickr/dist/themes/material_blue.css\">
- 翠绿色
<link rel=\"stylesheet\" type=\"text/css\" href=\"https://npmcdn.com/flatpickr/dist/themes/material_green.css\">
- 鲜红色
<link rel=\"stylesheet\" type=\"text/css\" href=\"https://npmcdn.com/flatpickr/dist/themes/material_red.css\">
- 橘色
<link rel=\"stylesheet\" type=\"text/css\" href=\"https://npmcdn.com/flatpickr/dist/themes/material_orange.css\">
- airbnb
<link rel=\"stylesheet\" type=\"text/css\" href=\"https://npmcdn.com/flatpickr/dist/themes/airbnb.css\">
- confetti
<link rel=\"stylesheet\" type=\"text/css\" href=\"https://npmcdn.com/flatpickr/dist/themes/confetti.css\">
其他
- 手机端适用
何时flatpickr检验到挪动电脑浏览器，它会将日期键入转化为远程服务器日期/時间/日期时间键入，不用另外的配备。可是，远程服务器日期時间挑选仅限下列作用：
- 1、内置日期/時间/日期时间
- 2、minDate
- 3、maxDate
- 兼容模式
在IE10 ，Safari 6 ，Firefox和Chrome中拆箱即用，假如在IE9
<!--[if IE 9]> <link rel=\"stylesheet\" type=\"text/css\" href=\"https://npmcdn.com/flatpickr/dist/ie.css\"> <![endif]-->
汇总
flatpickr是一个非常好的单独日期（時间）选择器，尤其合适一些指定的不需要引入其他架构的情况下，单纯、简易、雅致，如果你的新项目有这种的要求，可以了解一下它，只是是一些配备就能达到强劲的作用！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
