强大且美观的时间选择插件 flatpickr 教程

一次项目中在寻找时间选择器的时候发现 flatpickr 这个插件很不错，在这里安利给大家，并附上一个简单的教程。

效果图如下：

官网地址：https://flatpickr.js.org/

安装方式

npm 安装方式的话就用以下方式

npm i flatpickr --save

如果是非模块化直接引入的话，可以直接引入CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

或者直接把文件下载下来放在项目中引入本地路径。

 

创建实例

首先需要创建 <input> 节点。

如果项目中有JQ的话，也可以协助操作实例。

$(".selector").flatpickr(option);

原生js创建实例：

var fp = flatpickr("#id", option);  // id选择器也可以改为Dom对象, option为配置对象

// 如果创建实例时未保存实例变量，可通过以下方式获取到实例对象。
var fp = document.querySelector("#id").flatpickr;

 

属性

下文中的 fp 全部代表实例。

fp.selectedDates    所选日期的数组（或对象）

fp.currentYear    所选年份

fp.currentMonth 所选月份（0 到 11）

 

方法

changeMonth（monthNum，is_offset = true）

参数二传入布尔值，默认为true。当为 true 时，参数一为相对月份；否则，参数一是绝对月份。

下面是例子

fp.changeMonth(1);    // 没有传参数二，为true。则改变所选月份为下一个月。
fp.changeMonth(-2);    // 修改月份为前两个月

fp.changeMonth(0, false);    // 此时传入false, 修改月份为一月。

clear()

清除所选月份

destroy()

销毁在该Dom元素上所绑定的实例

formatDate(Date, formatStr)

转换时间对象的格式。参数一为date对象，参数二为字符串形式的日期格式

jumpToDate(date)

将视图中的日期设置为 date， date 可以为字符串或者Date对象。

open()

显示（打开）日历面板

parseDate(dateStr, dateFormat)

将字符串格式的时间 或 时间戳 转换为Date对象

set(option, value)

添加配置到实例中。

setDate(date)

设置当前选中日期为date，date可以是字符串、Date对象 或 数组（用于范围性选择的日期）。

toggle()

显示（打开）/隐藏（关闭）日历面板。

 

本文就介绍到这里吧，至于上文提到的option（配置参数），有些比较难表达出来，还有些我也不太清楚用处，所以就不列出来了。大家可以在官网跟着官方例子操作，例子前后都有写有配置说明，还有实际效果可以看，可以说是很直观了。