【お知らせ】
この翻訳ページは下記サイトに移行します。下記リンク先よりご確認ください。
これに伴い当ページの更新を停止します。
[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",
});