强大的日期时间选择器插件flatpickr的使用方法

        第一次接触该插件我就对‘强大’二字感觉好奇,是什么样的插件才可以配的上这两个字,带着好奇心我该插件的中文文档上查看了一番。首先该插件界面简单实用,不仅支持PC端也支持移动手机端。内置提供了主题效果(目前博主还没有用到该功能),并支持中文。它有以

下特点:

  1. 实用SVG作为界面图标。
  2. 兼容JQuery。
  3. 支持对日期格式的解析。
  4. 轻量级,高性能,压缩后的版本仅6K大小。
  5. 对手机原生日期格式的支持。

浏览器的兼容性:

中文文档:http://www.htmleaf.com/jQuery/Calendar-Date-Time-picker/201608213894.html

原文文档:https://flatpickr.js.org/getting-started/

安装:

使用方法:

初始化插件:

配置参数就不说了,文档上都有,可以根据自己的喜好和习惯自行设置。

博主主要介绍如何使用该插件(直接上图):

HTML5:

JQ:

       在这里需要注意的就是clickOpens的使用,文档那个中介绍该属性是用来判断 是否在点击输入框时打开日期时间选择界面。如果你想通过手动.open()方法来打开,该选项设置为false。不设置该属性就会在点击的时候弹出插件。所以第一次使用该插件的博友们需要注意了。

在开发的过程中我想用点击一个图片让插件弹出,文档中这样介绍的:

       文档中只说了Bootstrap和其他框架中可以使用,我不清楚VUE中会不会这样使用,博主也试过,不过没有成功,如果在VUE中可以使用请看到的博友们及时相告。于是我用了文档中的另一种方法.open()方法。

定义一个变量来接受该插件,通过你的button或者图片的点击事件来实现.open()的方法。

       关于主题的切换,博主没有去实现它,有已经实现的小伙伴可以告诉博主,让博主也学习一下。博主现在这里谢谢啦。(博主喜欢贴图是因为懒)。

猜你喜欢

转载自blog.csdn.net/qq_39256667/article/details/81020771