tobijibu

Localization

【お知らせ】 この翻訳ページは下記サイトに移行します。下記リンク先よりご確認ください。
これに伴い当ページの更新を停止します。
[flatpickr - Japanese] - http://tr.you84815.space/flatpickr/
上記サイトは随時更新していきますので、今後とも、宜しくお願い致します。






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

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

モジュール環境

インスタンス別

JavaScript
const flatpickr = require("flatpickr");
const Japanese = require("flatpickr/dist/l10n/ja.js").ja;
// or.. import {ja} from "flatpickr/dist/l10n/ja.js"

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

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

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

new flatpickr(myElem);

非モジュール環境

インスタンス別

HTML
<script src="https://npmcdn.com/flatpickr/dist/flatpickr.min.js"></script>
<script src="https://npmcdn.com/flatpickr/dist/l10n/ja.js"></script>
JavaScript
new flatpickr(myElement, {
    "locale": "ja"  // このインスタンスのみの言語指定
});

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

HTML
<script src="https://npmcdn.com/flatpickr/dist/flatpickr.min.js"></script>
<script src="https://npmcdn.com/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://npmcdn.com/flatpickr/dist/l10n/ja.js"></script>
<input class="flatpickr" type="text" placeholder="Select Date.." readonly="readonly">
JavaScript
flatpickr('.flatpickr', {
    inline: 'true',
    locale: "ja",
});

info_outline home keyboard_arrow_left keyboard_arrow_right