Localization

flatpickrは沢山の言語をサポートしています。

全体に一括で指定することもできますし、インスタンス毎に別々の言語を指定することもできます。

モジュール環境

ES Module(サポートされている環境の場合)

import flatpickr from "flatpickr"
import { Japanese } from "flatpickr/dist/l10n/ja.js"

flatpickr(myElem, {
  "locale": Japanese // このインスタンスのみの言語指定
});

require()を使う場合

JavaScript

const flatpickr = require("flatpickr");
const Japanese = require("flatpickr/dist/l10n/ja.js").default.ja;

flatpickr(myElem, {
  "locale": Japanese // このインスタンスのみの言語指定
});

グローバル(全てのインスタンス)

JavaScript

const Japanese = require("flatpickr/dist/l10n/ja.js").default.ja;
// or import { Japanese } from "flatpickr/dist/l10n/ja.js"
flatpickr.localize(Japanese); // デフォルトの言語が日本語になります

flatpickr(myElem);

非モジュール環境

インスタンス別

HTML

<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>

JavaScript

flatpickr(myElement, {
  "locale": "ja"  // このインスタンスのみの言語指定
});

グローバル(全てのインスタンス)

HTML

<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>

JavaScript

flatpickr.localize(flatpickr.l10ns.ja);
flatpickr("mySelector");

言語設定の特定の値を変更することもできます。 例えば、週の最初の曜日を月曜にする場合は以下のように指定します。

flatpickr.l10ns.default.firstDayOfWeek = 1; // Monday

言語に関係なくオプションを指定したい場合は、 localeオプションを使って値を上書きします。

new flatpickr(myElem, {
  locale: {
    firstDayOfWeek: 2
  }
});

デモ

カレンダーを日本語表記で表示しています。

HTML

<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
<input class="flatpickr" type="text" placeholder="Select Date.." readonly="readonly">

JavaScript

flatpickr('.flatpickr', {
  inline: 'true',
  locale: "ja",
});