結論：この2行を追加する
flatpickrを日本語表示にするには、本体を読み込んだあとに日本語ロケールファイル（l10n/ja.js）を読み込み、locale: "ja" を設定に渡すだけです。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css">
<input type="text" id="datepicker" placeholder="日付を選択">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/l10n/ja.min.js"></script>
<script>
flatpickr("#datepicker", {
locale: "ja",
dateFormat: "Y年m月d日(D)"
});
</script>
実際に動くデモです。入力欄をクリックすると、曜日・月表示が日本語になったカレンダーが開きます。
各設定の意味
日本語化のために追加しているのは、CSS1本とJS2本、それに設定オプション2つです。それぞれの役割を確認します。
flatpickr.min.css
カレンダー本体のスタイルシート。日本語化とは直接関係ないが、これを読み込まないとカレンダーが崩れた見た目になる。
flatpickr.min.js
本体スクリプト。flatpickr() 関数自体はこれが定義している。
l10n/ja.min.js
日本語ロケールの定義ファイル。曜日名・月名・週の開始日（日曜始まり）などを本体に登録する。
locale: "ja"
登録済みのロケールから日本語を使うよう指定するオプション。ロケールファイルを読み込んだだけでは反映されず、この指定が必要。
dateFormat
選択した日付を入力欄にどう表示するかのフォーマット文字列。日本語ロケールを読み込んでも、これを変えない限り表示は Y-m-d のまま。
バージョンは記事公開時点の最新安定版である4.6.13を使っています。CDN上のURLはバージョン番号を含むため、既存事例で使っているバージョンと揃えておくとデモ間で挙動が食い違いません。
よくあるハマりどころ
ja.jsを読み込む順序を間違える
一番多いのが、l10n/ja.js を flatpickr.min.js より先に読み込んでしまうケースです。ロケールファイルは「先に存在するflatpickr本体にロケールを追加登録する」処理なので、本体がまだ読み込まれていない状態で実行するとエラーになり、カレンダーが英語表示のまま止まります。
<!-- NG: 本体より先に読み込むとエラーになる --> <script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/l10n/ja.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js"></script>
順序が逆になっていないか、ブラウザのコンソールにエラーが出ていないかをまず確認してください。
dateFormatに曜日を含める書き方
日付だけでなく曜日も表示したい場合は、dateFormat に D（曜日の短縮形）を追加します。l（小文字のL）を使うと曜日をフルで表示できます。
flatpickr("#datepicker", {
locale: "ja",
dateFormat: "Y年m月d日(D)" // 例: 2026年7月2日(木)
});
flatpickr("#datepicker2", {
locale: "ja",
dateFormat: "Y年m月d日(l)" // 例: 2026年7月2日(木曜日)
});
曜日の書式指定は日本語ロケールを読み込んでいないと効きません。locale: "ja" を書き忘れると、曜日部分だけ英語の短縮形（Thuなど）になります。
プレースホルダーとの併用
初期状態で何も選択されていないとき、入力欄に案内文を出したい場合は、通常のHTML属性である placeholder をそのまま使えます。flatpickr側に専用のオプションはありません。
<input type="text" id="datepicker" placeholder="日付を選択してください">
ここで注意したいのが、altInput: true を使うケースです。altInput は表示用の入力欄を別に生成する仕組みで、元の input に付けた placeholder は複製先の要素に自動では引き継がれません。altInput を使う場合は altInputClass で見た目を調整しつつ、プレースホルダーは別途 altInput 用の要素に設定する必要があります。単純にプレースホルダーだけ出したい場合は、altInput を使わない構成のほうがシンプルです。
まとめ
flatpickrの日本語化は、本体のあとに l10n/ja.js を読み込み、locale: "ja" を設定するだけで完了します。つまずくポイントのほとんどは読み込み順序か、dateFormat の書式指定漏れです。曜日を出したいときは D か l を dateFormat に足すことを覚えておけば十分です。選択した日付をJS側で取得する方法は「flatpickrのonChangeで選択した日付を取得する方法」、期間指定を実装したい場合は「flatpickrで日付の範囲選択を実装する方法」で解説しています。
関連するUI事例
flatpickrを使った日付・時刻選択の実装例です。単一選択・範囲選択・時刻選択のパターンをまとめて確認できます。