例子

除非另有说明,否则以下示例的标签仅由输入元素和具有给定配置的flatpickr调用组成。

基础

flatpickr 没有任何配置。

日期时间

{
    enableTime: true,
    dateFormat: "Y-m-d H:i",
}

人性化的日期

altInput 隐藏原始输入并创建一个新输入。

选择日期后,原始输入将包含Y-m-d... 字符串,而 altInput 则将以更清晰,可自定义的格式显示日期。

强烈建议启用此选项。

{
    altInput: true,
    altFormat: "F j, Y",
    dateFormat: "Y-m-d",
}

选择日期后,检查此输入以查看其工作原理。

供应日期为flatpickr

flatpickr有许多选项,可以接受各种格式的日期值。那些是:

  • defaultDate
  • minDate
  • maxDate
  • enable/disable

这些选项接受的值均遵循相同的准则。

您可以采用多种格式指定这些日期:

  • 日期对象始终被接受
    • new Date(2015, 0, 10)
  • 时间戳始终被接受
    • 例如. 1488136398547
  • 始终接受ISO日期字符串
    • 例如. "2017-02-26T19:40:03.243Z"
  • 日期字符串,必须dateFormat按时间顺序匹配

    • dateFormat 默认为 YYYY-MM-DD HH:MM
    • 这意味着 "2016" "2016-10", "2016-10-20", "2016-10-20 15", "2016-10-20 15:30" 都是有效的日期字符串
  • 快捷 "today"

预加载日期

所选日期将从输入的值或 defaultDate 选项中解析。

请参阅 提供日期以获取有效的日期示例。

minDate 和 maxDate

minDate 指定允许选择的最短/最早日期(含)。

maxDate 指定允许选择的最大/最新日期(包括最后一个日期)。

{
    minDate: "2020-01"
}

{
    dateFormat: "d.m.Y",
    maxDate: "15.12.2017"
}

{
    minDate: "today"
}

{
    minDate: "today",
    maxDate: new Date().fp_incr(14) // 14 days from now
}

禁用日期

如果您想使某些日期无法选择,可以采用多种方法。

  1. 禁用特定日期
  2. 禁用日期范围
  3. 使用功能禁用日期

使用disable选项,所有这些都是可能的。


禁用特定日期

{
    disable: ["2025-01-30", "2025-02-21", "2025-03-08", new Date(2025, 4, 9) ],
    dateFormat: "Y-m-d",
}


禁用日期范围:

{
    dateFormat: "Y-m-d",
    disable: [
        {
            from: "2025-04-01",
            to: "2025-05-01"
        },
        {
            from: "2025-09-01",
            to: "2025-12-01"
        }
    ]
}


由函数禁用日期:

该函数接受一个Date 对象,并应返回一个 boolean 值。
如果函数返回 true,则日期将被禁用。

这种灵活性使我们可以使用任意逻辑来禁用日期。
下面禁用周六和周日的例子。

{
    "disable": [
        function(date) {
            // return true to disable
            return (date.getDay() === 0 || date.getDay() === 6);

        }
    ],
    "locale": {
        "firstDayOfWeek": 1 // start week on Monday
    }
}

禁用除少数所有日期

这是一个enable 选项,其中包含日期字符串,日期范围和函数的数组。与 disable 上面的选项基本相同,但相反。

启用特定日期

{
    enable: ["2025-03-30", "2025-05-21", "2025-06-08", new Date(2025, 8, 9) ]
}


启用日期范围(S):

{
    enable: [
        {
            from: "2025-04-01",
            to: "2025-05-01"
        },
        {
            from: "2025-09-01",
            to: "2025-12-01"
        }
    ]
}


通过功能启用日期:

{
    enable: [
        function(date) {
            // return true to enable

            return (date.getMonth() % 2 === 0 && date.getDate() < 15);

        }
    ]
}

选择多个日期

可以选择多个日期。

{
    mode: "multiple",
    dateFormat: "Y-m-d"
}

预加载多个日期

{
    mode: "multiple",
    dateFormat: "Y-m-d",
    defaultDate: ["2016-10-20", "2016-11-04"]
}

自定义连词

{
    mode: "multiple",
    dateFormat: "Y-m-d",
    conjunction: " :: "
}

范围日历

使用范围日历选择日期范围。

{
    mode: "range"
}

请注意,禁用日期(通过minDate, maxDate, enabledisable)将不会在选择被允许。

{
    mode: "range",
    minDate: "today",
    dateFormat: "Y-m-d",
    disable: [
        function(date) {
            // disable every multiple of 8
            return !(date.getDate() % 8);
        }
    ]
}

预压范围的日期

{
    mode: "range",
    dateFormat: "Y-m-d",
    defaultDate: ["2016-10-10", "2016-10-20"]
}

时间选取

{
    enableTime: true,
    noCalendar: true,
    dateFormat: "H:i",
}

24小时时间选择器

{
    enableTime: true,
    noCalendar: true,
    dateFormat: "H:i",
    time_24hr: true
}

时间选取W /限制

{
    enableTime: true,
    noCalendar: true,
    dateFormat: "H:i",
    minTime: "16:00",
    maxTime: "22:30",
}

预压时间

{
    enableTime: true,
    noCalendar: true,
    dateFormat: "H:i",
    defaultDate: "13:45"
}

用的DateTimePicker有限时间范围

{
    enableTime: true,
    minTime: "09:00"
}

{
    enableTime: true,
    minTime: "16:00",
    maxTime: "22:00"
}

内联日历

使用inline 选项以始终打开状态显示日历。

{
    inline: true
}

显示周数

启用 weekNumbers 选项以在日历左侧的列中显示星期数。

{
    weekNumbers: true,
    /*
        或者,您可以重写
        按从日期中提取周数
        提供getWeek函数。需要约定
        作为参数并应返回相应的字符串
        你想每周都出现在左边。
    */
    getWeek: function(dateObj) {
        // ...
    }
}

flatpickr + 外部元素

flatpickr可以解析在Bootstrap和其他框架中常见的文本框和按钮的输入组。

这允许附加标记以及自定义元素来触发日历状态。

<div class="flatpickr">
    <input type="text" placeholder="选择日期.." data-input> <!-- input is mandatory -->

    <a class="input-button" title="toggle" data-toggle>
        <i class="icon-calendar"></i>
    </a>

    <a class="input-button" title="clear" data-clear>
        <i class="icon-close"></i>
    </a>
</div>
{
    wrap: true
}