插件

插件本质上是一组hooks,它们接收一个可选的配置对象和一个flatpickr 实例.

用户要求的无法实现核心功能的功能通常最终会出现在插件中。

confirmDate

选择以下任意一项后,为用户提供视觉提示:

  • 日期+时间
  • 多个日期
{
    "enableTime": true,
    "plugins": [new confirmDatePlugin({})]
}

随附了精美的SVG图标以及合理的默认值,但是您可以自定义它们。

以下是所有可用的选项:

{
    confirmIcon: "<i class='fa fa-check'></i>", // 你图标的html,如果你想覆盖
    confirmText: "OK ",
    showAlways: false,
    theme: "light" // or "dark"
}

weekSelect

选择一周。

flatpickr({
    "plugins": [new weekSelect({})],
    "onChange": [function(){
        // 提取周数
        // 注意:“this”绑定到flatpicker实例
        const weekNumber = this.selectedDates[0]
            ? this.config.getWeek(this.selectedDates[0])
            : null;

        console.log(weekNumber);
    }]
});

rangePlugin (beta)

使用两个输入进行范围选择。

flatpickr({
    "plugins": [new rangePlugin({ input: "#secondRangeInput"})]
});

MinMaxTimePlugin (beta)

每个日期的自定义minTime和maxTime。

{
    enableTime: true,
    minDate: "2025",
    plugins: [
        new minMaxTimePlugin({
            table: {
                "2025-01-10": {
                    minTime: "16:00",
                    maxTime: "22:00"
                }
            }
        })
    ]
};

monthSelectPlugin

显示仅一个月的日历视图

{
    plugins: [
        new monthSelectPlugin({
          shorthand: true, //defaults to false
          dateFormat: "m.y", //defaults to "F Y"
          altFormat: "F Y", //defaults to "F Y"
          theme: "dark" // defaults to "light"
        })
    ]
};