IgbXDatePicker – ポップアップカレンダーの月と曜日を日本語化する

注意
2024年9月リリースの Ignite UI for Blazor バージョン 24.1.46 以降、従来の IgbDatePicker は IgbXDatePicker (“XDateピッカー”) に名前が変更され非推奨となりました。同じ名前の IgbDatePicker は新しいコンポーネントとして実装しなおされています。新しい IgbDatePicker の日本語化については以下を参照ください。
IgbDatePicker – ポップアップカレンダーを日本語化する – INFRAGISTICS ナレッジ ベース

2025年12月現在、IgbXDatePicker でポップアップ表示されるカレンダーの表示は、そのままでは日本語表記になりません。
このカレンダーの表示 (月名と曜日) を日本語表記にするには、以下の実装が必要となります。

日本語表記を掲載した JSON ファイルを用意

まず、IgbXDatePicker のカレンダーの表示機構に合わせた、月および曜日の日本語表記を記載した JSON 形式のテキストファイルを用意します。
ファイル名は任意ですが、特に Blazor WebAssembly の場合は、ブラウザ側から読み取れる場所に配置する必要があります。
ここではファイル名は “date-picker.ja.json” とし、配置先は Blazor WebAssembly での利用例では ?wwwroot/resources フォルダに、Blazor Server での利用例では Resources フォルダに配置することとします。
下記に “date-picker.json” の一部を示します (完全なサンプルはさらに下に掲載のサンプルコードから入手いただけます)。

{

  "April_Full": "4月",
  "April_Short": "4月",
  "August_Full": "8月",
  "August_Short": "8月",
  "December_Full": "12月",
  "December_Short": "12月",
  "February_Full": "2月",
  "February_Short": "2月",
  "Friday_Full": "金曜日",
  "Friday_Short": "金曜",
  "Friday_Single": "金",

(以下省略)

日本語表記 JSON ファイルの内容を、IgbXDatePicker に設定する

IgbXDatePicker を使用するページ (Razor コンポーネント) の初回表示のタイミングで、先に用意した日本語表記の JSON ファイルの内容を、IgbXDatePicker に対し、SetCustomizedStringAsync() メソッドを使って設定します。

Blazor WebAssembly と Blazor Server とで、実装はほぼ同じですが、日本語表記 JSON ファイルの内容の読み取り方が少し異なります。
以下の実装例を参照ください。

Blazor WebAssembly における実装例

@page "/"
@inject HttpClient Http
...
<IgbXDatePicker @ref="_DatePicker" .../>
...
@code
{
    private IgbXDatePicker _DatePicker;

    // このページ (Razor コンポーネント) の初回表示のタイミングで、
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 用意しておいた日本語表記 JSON ファイルの内容を、
            // HTTP 要求でサーバー側から取得し、
            var jpnJsonText = await Http.GetStringAsync(
                                        "resources/date-picker.ja.json");

            // 読み取った JSON 文字列を IgbDatePicker に設定。
            await DatePicker.SetCustomizedStringAsync("en", jpnJsonText);
        }
    }
    ...

Blazor Server における実装例

@page "/"
@inject IWebHostEnvironment HostEnv
...
<IgbXDatePicker @ref="_DatePicker" .../>
...
@code
{
    private IgbXDatePicker _DatePicker;

    // このページ (Razor コンポーネント) の初回表示のタイミングで、
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 用意しておいた日本語表記 JSON ファイルの内容を、
            // コンテンツファイルプロバイダー経由で読み取り、
            var jsonFile = HostEnv.ContentRootFileProvider.GetFileInfo(
                                          "Resources/date-picker.ja.json");
            using var jsonFileStream = jsonFile.CreateReadStream();
            using var jsonFileReader = new StreamReader(jsonFileStream);
            var jpnJsonText = await jsonFileReader.ReadToEndAsync();

            // 読み取った JSON 文字列を IgbDatePicker に設定。
            await DatePicker.SetCustomizedStringAsync("en", jpnJsonText);
        }
    }
    ...

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

/* ポップアップカレンダーのヘッダ部分の要素を、
    前の月ボタン、年選択ボタン、月選択ボタン、次の月ボタンの順に並び替え */
div[key="popupContentAreaOuter"] div[key="popupContentAreaInner"] div[role="row"] div:has(button[aria-label="Previous Month"]) {
    order: 0;
}

div[key="popupContentAreaOuter"] div[key="popupContentAreaInner"] div[role="row"] div:has(button[aria-label="Select Year"]) {
    order: 1;
}

div[key="popupContentAreaOuter"] div[key="popupContentAreaInner"] div[role="row"] div:has(button[aria-label="Select Month"]) {
    order: 2;
}

div[key="popupContentAreaOuter"] div[key="popupContentAreaInner"] div[role="row"] div:has(button[aria-label="Next Month"]) {
    order: 3;
}

/* 年選択ボタンの後に「年」という文字を追加 */
div[key="popupContentAreaOuter"] div[key="popupContentAreaInner"] div[role="row"] div:has(button[aria-label="Select Year"])::after {
    content: "年";
    font-size: 14.5px;
}

以上の実装で、IgbXDatePicker のカレンダー上、月と曜日の表示が日本語化されます (下図参照)。