WEB资源网

最新鲜的WEB程序员技术文档及相关资源 – Happy Life, Happy Coding!

一款轻量级、功能强大的时间选择器 – flatpickr

今天为大家分享一款轻量级、功能强大的时间选择器,JS 文件压缩后只有14KB,并且不需要任何的依赖。

1. 安装

通过 npm 或者 bower 安装:

// npm 安装
npm install flatpickr

// bower 安装
bower install flatpickr-calendar

或者直接 下载 后引入:

<link rel="stylesheet" type="text/css" href="/path/to/flatpickr.css">
<script src="/path/to/flatpickr.js"></script>

2. 语法

flatpickr('selector', [options]);

3. 功能

3.1 基本的日期选择

flatpickr-1

3.2 日期与时间

flatpickr-2

3.3 禁用某个范围的日期

flatpickr-3

当然除了上面列出的,还有其他众多功能,如自定义日期格式、限制最小与最大日期、时间选择器、预加载日期、UTC 模式、显示星期等等,此外还支持时间本地化,提供了中文语言包;并且提供多种主题,如 Material 风格主题、黑色主题等。

Material 风格主题

flatpickr-4

Dark 主题

flatpickr-5

项目地址:Github

作者
主站点:http://9iphp.com/ 个人简介:http://me.9iphp.com