flatpickrとは？依存なしの日付・時刻pickerライブラリ

ページ内ナビ

概要

flatpickrは依存ライブラリを持たないJavaScript/TypeScriptの日付・時刻pickerです。単一日、期間、複数日、時刻だけの入力を切り替えられ、表示形式、選択禁止日、week number、locale、theme、pluginを設定できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-10-05

主な特徴

single・range・multiple・time modeを用途に合わせて切り替える

modeはsingle、multiple、range、timeを選べます。enableTimeを使うと日付と時刻を同じpickerで入力できます。

出典：[1][2]

選択可能日・禁止日と表示形式をoptionで制御する

特定日、期間、任意logicによるdisable条件を設定でき、利用者に見せるdate formatも用途に合わせて変更できます。

出典：[1]

locale・theme・pluginとフレームワーク用ラッパーを組み合わせる

READMEは51 locale、複数theme、pluginを挙げ、React、Angular、Vue、Svelte等のwrapper projectも案内しています。

出典：[1]

向いている用途

予約・検索条件・管理画面でnative date inputより豊富な選択UIが必要な場合に向く

期間検索、予約日時、複数日の指定、特定日の選択禁止などを一貫したpickerで扱いたいWebアプリケーションに適します。

出典：[1]

導入前の確認

日付の業務ルールやtimezone処理はアプリケーション側で設計する

pickerは入力UIと日付選択を支援しますが、営業日判定、timezone変換、serverとの保存formatなどの業務ロジックは利用側で明示的に設計してください。

出典：[1]

フレームワーク用ラッパーは本体と別projectのためversion互換を確認する

React、Vue、Angular等のwrapperはREADMEから別projectとして案内されています。本体4.6.13との互換性やフレームワーク側の更新状況を個別に確認してください。

出典：[1]

参考にした公式資料

[1]flatpickr v4.6.13 README(2026-10-05)
[2]flatpickr v4.6.13 options(2026-10-05)
[3]flatpickr v4.6.13 package metadata(2026-10-05)
[4]flatpickr v4.6.13 release(2026-10-05)
[5]flatpickr MIT license(2026-10-05)

編集部からの補足

native date inputでは不足しやすい期間選択・複数日・時刻・無効日を一つのAPIで扱える点が実務向けです。一方、最新stable releaseは4.6.13のため、採用時は対象browserやフレームワーク用ラッパーとの互換性を実環境で確認してください。

3ステップで試す

1
flatpickr 4.6.13を導入する
確認対象の安定版を固定して導入します。
npm install --save-exact flatpickr@4.6.13
2
flatpickr本体と標準CSSを読み込む
JavaScript APIと標準styleを読み込みます。
import flatpickr from 'flatpickr'; import 'flatpickr/dist/flatpickr.min.css';
3
期間と時刻を選べるpickerを作る
mode: 'range'とenableTimeを組み合わせ、期間と時刻を同じ入力欄から選べるようにします。
flatpickr('#schedule', { mode: 'range', enableTime: true, dateFormat: 'Y-m-d H:i' });

公式READMEで確認

成長

成長の推移 · 直近30日

16,464 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）: 0
Open PR: 134

開発アクティビティを蓄積中です。

Built with

TypeScript

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

datetime
datetime-picker
datepicker
timepicker
daterange
date
daterangepicker

Stars: 16,464
Forks: 1,452
Watchers: 196
Open Issues: 726
Contributors: 221
所有者種別: Organization
主要言語: TypeScript
ライセンス: MIT
リポジトリ最終更新: 2024/08/02

概要

特徴と向いている用途

主な特徴

single・range・multiple・time modeを用途に合わせて切り替える

選択可能日・禁止日と表示形式をoptionで制御する

locale・theme・pluginとフレームワーク用ラッパーを組み合わせる

向いている用途

予約・検索条件・管理画面でnative date inputより豊富な選択UIが必要な場合に向く

導入前の確認

日付の業務ルールやtimezone処理はアプリケーション側で設計する

フレームワーク用ラッパーは本体と別projectのためversion互換を確認する

参考にした公式資料

3ステップで試す

flatpickr 4.6.13を導入する

flatpickr本体と標準CSSを読み込む

期間と時刻を選べるpickerを作る

成長

開発アクティビティ

Built with

カテゴリとタグ

カテゴリ

タグ

GitHubデータ

GitHub Topics

関連情報

あわせて探訪