flatpickr - にほんご。

Localization

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",
});

© 2017 Gregory Petrosyan Released under the MIT license

このコンテンツはGregory Petrosyan(chmln)によるflatpickrドキュメントを翻訳/改変したものです。