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

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

カレンダーを日本語で表示するには、日本語情報を持つ “ja” ロケールを登録し、igc-date-picker の locale プロパティに設定します。

まず、以下のようにロケール登録を行うファンクション registerLocaleData を定義しておき、

// src/locale.ts
export const registerLocaleData = (locale: any) => {
    const global = window as any;
    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” ロケールの情報を定義して、

// src/locale.ja.ts
export 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,
];

これらを main.ts (またはエントリーポイントとなるファイル) などで呼び出します。

// src/main.ts
...
import * as locales from "./locale.ja.ts";
import { registerLocaleData } from "./locale.ts";
import { defineComponents, IgcDatePickerComponent } from 'igniteui-webcomponents';

defineComponents(IgcDatePickerComponent);

// ロケールデータの登録
registerLocaleData(locales.ja);
...

登録した “ja” ロケールを適用するため、igc-date-picker の locale 属性に “ja” を設定します。

<igc-date-picker locale="ja"></igc-date-picker>

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

/* 日付ピッカーの年と月の並び順を逆転させる */
igc-date-picker::part(years-navigation) {
    order: -1;
}
/* 年表示の後ろに"年" の文字を追加する */
igc-date-picker::part(years-navigation)::after {
    content: "年";
}

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