Flatpickr 实例

检索flatpickr实例

您可以通过将调用结果分配给变量来存储实例。

这里有几种方法。

const fp = flatpickr("#myID", {}); // flatpickr
                

const myInput = document.querySelector(".myInput");
                const fp = flatpickr(myInput, {});  // flatpickr
                

const calendars = flatpickr(".calendar", {});
                calendars[0] // flatpickr
                

如果您忘记将实例保存到变量中

flatpickr("#myInput", {}); // 不保存到var的调用
                // ...
                
                const fp = document.querySelector("#myInput")._flatpickr;
                

属性

一旦您说出实例 fp，访问道具就很简单，例如 fp.currentYear

selectedDates

选定日期的数组（日期对象）。

currentYear

当前显示在日历上的年份。

currentMonth

当前显示在日历上的零索引月份号（0-11）。

config

配置对象（默认值+用户指定的选项）。

方法

changeMonth(monthNum, is_offset = true)

更改当前月份。

let calendar = flatpickr(yourElement, config);
                calendar.changeMonth(1); // 提前一个月
                calendar.changeMonth(-2); //两个月前
                
                calendar.changeMonth(0, false); // 上一月
                

clear()

重置选定的日期（如果有）并清除输入。

close()

关闭日历。

destroy()

销毁flatpickr实例，进行清理-删除事件侦听器，恢复输入等。

formatDate(dateObj, formatStr)

dateObj 是一个日期，并且 formatStr 是一个由格式标记组成的字符串。

返回值 一个字符串表示形式dateObj, 格式为 formatStr

jumpToDate(date, triggerChange)

将日历视图设置为的年和月 date，可以是日期字符串，日期或什么都没有。

如果date未定义，则视图设置为最近选择的日期minDate，或今天的日期

如果triggerChange 将设置为 true，则仅当新值不同时才会触发 onMonthChange 和 onYearChange 挂钩。

open()

显示/打开日历。

parseDate(dateStr, dateFormat)

解析日期字符串或时间戳，并返回日期。

redraw()

重画日历。在大多数情况下不需要。

set(option, value)

如果需要，将config选项设置 option 为 value，重绘日历并更新当前视图。

setDate(date, triggerChange, dateStrFormat)

将当前选定的日期设置为 date，可以是日期字符串，日期或 Array 日期中的一个。

（可选）将true作为第二个参数传递，以强制触发任何onChange事件。如果您传递的日期字符串格式不是您自己的格式 dateFormat ，请提供 dateStrFormat 例如 "m/d/Y".

toggle()

如果日历关闭，则显示/打开日历，否则隐藏/关闭日历。

元素

input

input 与关联的文本元素 flatpickr.

calendarContainer

这就是div.flatpickr-calendar元素.

prevMonthNav

“左箭头”元素负责减少当前月份。

nextMonthNav

“右箭头”元素负责增加当前月份。

currentMonthElement

span 控制当月的名字。

currentYearElement

input 保持当前年份。

days

所有一天元素的容器。

有用的静态方法

flatpickr公开其日期解析器和格式化程序，不需要实例即可工作。

尽管没有说的那么强大moment.js，但它们的功能足以在大多数基本用例中替代它。

flatpickr.parseDate(dateStr, dateFormat)

返回一个Date对象。

flatpickr.parseDate("2016-10-20", "Y-m-d")

Thu Oct 20 2016 00:00:00

flatpickr.parseDate("31/01/1995", "d/m/Y")

Tue Jan 31 1995 00:00:00

flatpickr.formatDate(dateObj, dateFormat)

flatpickr.formatDate(new Date(), "Y-m-d h:i K")

“2017-04-24 11:56 AM”