【Blazor】 カレンダー（DatePicker）から値を取得する

<input type="date">を使うと、カレンダーから日付を取得することができます（Internet Explorerなど一部のブラウザを除く）。 取得した日付は@bindを介して、値を取得することができます。

以下サンプルコードになります。

@page "/"

<input type="date" min="@_start" max="@_end" @bind="DateTime">

@if (_message != null)
{
    <p>@_message</p>
}

@code{
    /// <summary>
    /// 入力可能日付（～から）
    /// </summary>
    private readonly string _start = DateTime.Now.AddMonths(-1).ToString("yyyy-MM-dd");

    /// <summary>
    /// 入力可能日付（～まで）
    /// </summary>
    private readonly string _end = DateTime.Now.ToString("yyyy-MM-dd");

    /// <summary>
    /// 選択されている日付
    /// </summary>
    private DateTime _dateTime = DateTime.Now;

    /// <summary>
    /// メッセージ
    /// </summary>
    private string _message;

    private DateTime DateTime
    {
        get => _dateTime;
        set
        {
            if (_dateTime != value)
            {
                _dateTime = value;
                _message = $"日付が {_dateTime:yyyy-MM-dd} に変更されました。";
            }
        }
    }
}

inputの属性minとmaxにyyyy-MM-ddにフォーマットした文字列を指定することで、 日付の範囲の最小と最大の設定することができます。今回の例では、１か月前から本日までの範囲で指定しています。

@bindにDateTimeプロパティを設定することで、 カレンダーから取得した値を受け取る際にsetが呼ばれ、_dateTimeに値を格納することができます。 またその際に、_messageへ_dateTimeにどの値が格納されたのかメッセージを格納しています。

動作確認してみると、以下のようになります。

カレンダーで日付を変更する毎に、メッセージが更新され、_dateTimeに値が格納されているのを確認できます。

カレンダーをどのブラウザでも同じデザインで表示したい場合は、 Radzenなどのライブラリのカレンダー（DatePicker）を利用する手段もあります。

※Radzenはテーマによりますが、基本的に無料なのでおすすめです。

RadzenのDatePickerのドキュメントはこちら

Blazorで利用できるライブラリは以下の記事にまとめていますので、 興味があれば確認してみてください。

無料・オープンソースのUIフレームワーク

この記事では、Blazorアプリケーションの開発を強化するための複数のUIライブラリを紹介しています。これには、Radzen、Blazorise、Blazored、MatBlazor、MudBlazor、Microsoft Fluent UI Blazor Components、Ant Design Blazor、そしてBlazorStrapが含まれます。各ライブラリは、Blazorアプリケーションに独自のデザインと機能性を提供し、開発プロセスを効率化します。これらのライブラリを活用することで、Blazor開発がより簡単かつ効果的になります。

更新日：2023/09/10

今回は、<input type="date">を使って、日付を取得する方法について解説しました。 日付の入力項目はよく使う項目だと思いますので、是非使ってみてください。