js时间选择器(js的4种选择器)
-
-
类目：知识大全
-
联系人：
-
微信号：
-
Q Q 号：
-
手机号：
-
浏览量：
354
【商户信息】
【货源详情】
介绍
flatpickr是一个轻量级、无强相关性的javascript日期选择器，几乎所有大型SPA或项目都涉及日期和时间输入。 浏览器的本机实现不一致，功能也有限。 大多数其他库需要部署许多依赖项，如jQuery、Bootstrap和tag.js。 flatpickr是一个零依赖、轻量级、但功能强大的日期选择器！
Github和文档
github :
3359 github.com/flatpickr/flatpickr
文档：
https://flatpickr.js.org/examples /
特性
没有依存(没有肥大化的包) )。
简单优雅的UI
输入日期和时间
范围选择
可以选择多个日期
可以作为时间选择器使用
用人性化的形式显示日期
您可以使用任何逻辑轻松禁用特定日期、日期范围或任何日期
频率
50种语言
8个丰富多彩的主题
很多插件
可用于更多库，如React、Angular、Vue和Ember
官方示例
官方文档有非常丰富的实例
的基本用法，无需配置
时间
{
启用时间： true，
dateFormat: 'Y-m-d H:i '，
}
人性化的表示
altInput隐藏原始输入并创建新输入。 选择日期时，原始输入将包含Y-m-d .字符串，altInput将以更清晰、可自定义的格式显示日期。
{
alt input :真，
altFormat: 'F j，y '，
dateFormat: 'Y-m-d '，
}
选择控件
1、defaultDate (默认值) )。
2、minDate (可选最小值) )
3、maxDate (可选最大值) )。
4、启用/禁用(可选或不可选的日期数组)。
例如：
{
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 '，
禁用： [
{
from: '2025-04-01 '，
to: '2025-05-01 '
(，
{
from: '2025-09-01 '，
to: '2025-12-01 '
}
]
//限制选择的日期范围
选择多个日期
{
模式： ' multiple '，
日期格式： ' y-m-d '
}
选择日期范围
{
模式： '范围'
}
时间选择器
{
启用时间： true，
无日历3360真，
dateFormat: 'H:i '，
}
内联显示
{
inline :真
}
显示周
{
week numbers :真，
//getweek:function(dateobj ) {
///.
//}
)；
外部控制
div class='flatpickr '
input type=' text ' placeholder=' select date . ' data-input！ -- input is mandatory --
aclass=' input-button ' title=' toggle ' data-toggle
i class='icon-calendar'/i
/a
aclass=' input-button ' title=' clear ' data-clear
i class='icon-close'/i
/a
/div
{
wrap :真
}
本地化
script src=' https://NP mcdn.com/flatpickr/dist/l10n/zh.js '/script
Flatpickr('#mypick '，{
' locale': 'zh '
)；
主题
部署方法：
link rel=' style sheet ' type=' text/CSS ' href=' https://NP mcdn.com/flatpickr/dist/themes/dark.CSS '
黑色主题
青青
link rel=' style sheet ' type=' text/CSS ' href=' https://NP mcdn.com/flatpickr/dist/themes/material _ blue.CSS
绿
link rel=' style sheet ' type=' text/CSS ' href=' https://NP mcdn.com/flatpickr/dist/themes/material _ green.CSS
红色
link rel=' style sheet ' type=' text/CSS ' href=' https://NP mcdn.com/flatpickr/dist/themes/material _ red.CSS
橙色
link rel=' style sheet ' type=' text/CSS ' href=' https://NP mcdn.com/flatpickr/dist/themes/material _ orange.corange
airbnb
link rel=' style sheet ' type=' text/CSS ' href=' https://NP mcdn.com/flatpickr/dist/themes/Airbnb.CSS '
康菲蒂
link rel=' style sheet ' type=' text/CSS ' href=' https://NP mcdn.com/flatpickr/dist/themes/confetti.CSS '
其它
移动端支持
当flatpickr检测到移动浏览器时，将日期输入转换为本地日期/时间/日期输入。 不需要额外的配置。 但是，选择本地日期和时间仅限于以下功能：
1、预装日期/时间/日期
2、minDate
3、最大日期
互换性
用IE10、Safari 6、Firefox、Chrome开箱，用IE9
！ --[if IE 9]
link rel=' style sheet ' type=' text/CSS ' href=' https://NP mcdn.com/flatpickr/dist/ie.CSS '
！ [endif]--
总结
flatpickr是一个独立的日期/时间选择器，特别适合于不需要部署特定框架的情况。 纯粹、简单、优雅。 如果项目有这样的需求，请看看它。 只需几个构成就可以满足强大的功能。
