介紹

flatpickr是輕量級的、功能強大的沒有依賴項的javascript日期選擇器，幾乎每個大型SPA或項目都涉及日期和時間輸入。瀏覽器的本機實現是不一致的，在功能上也是有限的。大多數其他庫都要求引入大量的依賴項，如jQuery、Bootstrap和tag.js。而flatpickr是一個零依賴、輕量級但功能強大的日期選擇器！

Github和文檔

github：

https://github.com/flatpickr/flatpickr

文檔：

https://flatpickr.js.org/examples/

特性

• 沒有依賴(沒有臃腫的包)
• 簡單，優雅UI
• 日期+時間輸入
• 範圍選擇
• 能夠選擇多個日期
• 可以用作時間選擇器
• 以人性化格式顯示日期
• 使用任意邏輯輕鬆禁用特定日期、日期範圍或任何日期
• 周數
• 50種語言
• 8個豐富多彩的主題
• 眾多插件
• 可用於React、Angular、Vue、Ember等更多的庫

官方示例

官方文檔中提供了非常豐富的實例

• 基本的用法，不用配置

• 時間

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

• 人性化的顯示

altInput隱藏原始輸入並創建一個新輸入。在日期選擇時，原始輸入將包含一個Y-m-d.字元串，而altInput將以更清晰、可自定義的格式顯示日期。

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

• 選擇控制
• 1、defaultDate（默認值）
• 2、minDate（可選最小值）
• 3、maxDate（可選最大值）
• 4、enable/disable（可以選擇或者不能選擇的日期數組）

如：

{
 minDate: "2020-01"
}

{
 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"
 }
 ]
}//限制選擇的日期範圍

• 選擇多個日期

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

• 日期範圍選擇

{
 mode: "range"
}

• 時間選擇器

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

• 內聯顯示

{
 inline: true
}

• 顯示周

{
 weekNumbers: true,
 /*
 可以通過重寫getWeek自定義顯示周
 */
 // getWeek: function (dateObj) {
 // // ...
 // }
});

• 外部控制

<div class="flatpickr">
 <input type="text" placeholder="Select Date.." 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
}

• 本土化

 <script src="https://npmcdn.com/flatpickr/dist/l10n/zh.js"></script>

 flatpickr("#mypick", {
 "locale": "zh"
 });

主題

引入方法：

<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/dark.css">

• 黑色主題

• 藍色

<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/material_blue.css">

• 綠色

<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/material_green.css">

• 紅色

<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/material_red.css">

• 橙色

 <link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/material_orange.css">

• airbnb

<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/airbnb.css">

• confetti

<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/confetti.css">

其它

• 移動端支持

什麼時候flatpickr檢測到移動瀏覽器，它會將日期輸入轉換為本機日期/時間/日期時間輸入，不需要額外的配置。但是，本機日期時間選擇僅限於以下功能：

• 1、預裝日期/時間/日期時間
• 2、minDate
• 3、maxDate
• 兼容性

在IE10+，Safari 6+，Firefox和Chrome中開箱即用，如果在IE9

<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/ie.css">
<![endif]-->

總結

flatpickr是一個不錯的獨立日期（時間）選擇器，特別適合某些特定的不需要引入其它框架的時候，純粹、簡單、優雅，如果你的項目有這樣的需求，可以看看它，僅僅是一些配置就能滿足強大的功能！