Flatpickr

一款轻量级的、强大的日期选择器,零依赖

flatpickr - javascript datetime picker

npm version Bower version

blue green confetti red default dark

Preamble

Almost every large SPA or project involves date and time input. There are limited options, however, if you also prefer to keep your projects lean and consequently stay away from heavy frameworks such as jQuery, or even Bootstrap.

Appalled at the fact that I have to load 300kb of jquery and jquery UI or hook up bootstrap just to use a calendar, I created this [date][time]picker that's powerful, easy to use, and looks good out of the box.

Written in vanilla javascript, works with anything, anywhere.

wew

Compatibility

IE9+, iOS Safari 6+, MS Edge, Chrome 8+, Firefox 6+

Install & Use

CDNJS: https://cdnjs.com/libraries/flatpickr

Demos and documentation: https://chmln.github.io/flatpickr

See also:

flatpickr - javascript 日期选择器

npm version Bower version

blue green confetti red default dark

前言

几乎每个大型的 SPA(单页应用)都会涉及到日期和时间的输入。如果你想实现这个功能的同时保持项目的干净整洁,不用诸如 jQuery 甚至 Bootstrap 之类的框架,那么你的选择是很有限的

一个让人震惊的事实是,为了使用一个简单的日历,我必须加载 300kb 的 jQuery 文件以及 jquery UI 或者引入 bootstrap,于是我创建了这样一个功能强大、易用好看的日期/时间选择器,纯 javascript 打造,能够在任何地方和任何情况下工作。

下面是 flatpickr 和其它几个日期选择库的大小对比

wew

功能特性

  • 轻量级,零依赖(如 jQuery)
  • 支持本地 Android+iOS 日期组件
  • 能够在IE9+浏览器上面运行
  • 支持日期范围选择
  • 聪明合理的默认配置
  • 有8个主题,37个本地化语言以及 SVG 图标

兼容性

IE9+, iOS Safari 6+, MS Edge, Chrome 8+, Firefox 6+

安装 使用

CDNJS: https://cdnjs.com/libraries/flatpickr

例子和文档: https://chmln.github.io/flatpickr

也可以看看:

讨论区