IgbDatePicker – ポップアップカレンダーを日本語化する

Ignite UI for Blazor の日付ピッカーコンポーネント IgbDatePicker について、ポップアップカレンダーはデフォルトで英語表記となっています。

このカレンダーを日本語で表示するには、JavaScript を使用して日本語情報を持つ “ja” ロケールを登録し、IgbDatePicker の Locale パラメータに設定します。

まず、以下のようにロケール登録を行う JavaScript 関数 registerLocaleData を定義しておき、

// wwwroot/register-local-data.js
window.registerLocaleData = (locale) => {
    const global = window;
    global.ng = global.ng || {};
    global.ng.common = global.ng.common || {};
    global.ng.common.locales = global.ng.common.locales || {};
    global.ng.common.locales[locale[0]] = locale;
};

次に、”ja” ロケールの情報を定義して上記 JavaScript 関数を呼び出します。

// wwwroot/local-ja.js
(() => {
    const ja = [
        "ja",
        [["午前", "午後"], undefined, undefined],
        undefined,
        [
            ["日", "月", "火", "水", "木", "金", "土"],
            undefined,
            ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"],
            ["日", "月", "火", "水", "木", "金", "土"],
        ],
        undefined,
        [
            ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
            ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
            undefined,
        ],
        undefined,
        [["BC", "AD"], ["紀元前", "西暦"], undefined],
        0,
        [6, 0],
        ["y/MM/dd", undefined, "y年M月d日", "y年M月d日EEEE"],
        ["H:mm", "H:mm:ss", "H:mm:ss z", "H時mm分ss秒 zzzz"],
        ["{1} {0}", undefined, undefined, undefined],
        [".", ",", ";", "%", "+", "-", "E", "×", "‰", "∞", "NaN", ":"],
        ["#,##0.###", "#,##0%", "¤#,##0.00", "#E0"],
        "JPY",
        "￥",
        "日本円",
        { BYN: [undefined, "р."], CNY: ["元", "￥"], JPY: ["￥"], PHP: [undefined, "₱"], RON: [undefined, "レイ"], XXX: [] },
        "ltr",
        () => 5,
    ];
    registerLocaleData(ja);
})();

これら JavaScript コードを index.html などフォールバックページで読み込みます。

// wwwroot/index.html
    ...
    <!--
    以下の 2 つの JavaScript ファイルを、この順番で、blazor.*.js より前に読み込みます。
    その上で、IgbDatePicker の Locale パラメータに "ja" を指定すると、日付列の書式が
    yyyy/MM/dd になり、セル編集時やフィルターにおける日付ピッカーのカレンダーが日本語表示
    になります。
    -->
    <script src="register-locale-data.js"></script>
    <script src="local-ja.js"></script>

    <script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
    <script src="_framework/blazor.webassembly#[.{fingerprint}].js"></script>
</body>

</html>

登録した “ja” ロケールを適用するため、IgrDatePicker の locale パラメータに “ja” を設定します。

<IgrDatePicker ... locale="ja"></IgrDatePicker>

最後に、カレンダーのヘッダー部分の表記が日本語形式となるよう css によって整えます。

/* 日付ピッカーの年と月の並び順を逆転させる */
igc-date-picker::part(years-navigation) {
    order: -1;
}

/* 年表示の後ろに "年" の文字を追加する */
igc-date-picker::part(years-navigation)::after {
    content: "年";
}

以上の内容で Ignite UI for Blazor の日付ピッカー IgbDatePicker で表示されるカレンダーが日本語表示になります。