您的位置:首页> 日志> 前端技术 正文

        日期选择器在项目中可能会经常遇到,今天来分享一个好用日期选择器插件。flatpickr是一款功能强大的纯JS扁平风格日期时间选择器插件。该日期时间选择器支持移动手机,提供多种内置的主题效果,并且提供对中文的支持。

它的特点:
o使用SVG作为界面的图标。
o兼容jQuery。
o支持对各种日期格式的解析。
o轻量级,高性能,压缩后的版本仅6K大小。
o对手机原生日期格式的支持。

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

使用方法:
在页面中引入flatpickr.css和flatpickr.js文件。

 HTML结构
<input id="flatpickr-tryme" placeholder="......"> 
可实现效果如图

初始化插件
有多种方法可以实例化一个日期时间选择器。如下:

flatpickr日期时间选择器插件的github地址为:https://github.com/chmln/flatpickr