Blazor Date Picker (日付ピッカー) コンポーネントの概要

Ignite UI for Blazor Date Picker は、手動でテキストを入力して日付を入力するか、ポップアップするカレンダー ダイアログから日付値を選択するために使用される機能豊富なコンポーネントです。軽量で使いやすい Date Picker を使用すると、ユーザーは、月、年、10 年の複数の表示オプションを使用して目的の日付に移動できます。また、最小および最大の日付制約や必須フィールドなどの一般的な検証プロパティもサポートしています。

Ignite UI for Blazor Date Picker コンポーネントを使用すると、ユーザーは月表示のカレンダード ロップダウンまたは編集可能な入力フィールドから単一の日付を選択できます。Blazor Date Picker は、カレンダーからのみ選択するための dialog モード、ロケール対応でカスタマイズ可能な日付の書式設定と検証の統合もサポートしています。

IgbDatePicker コンポーネントは、Ignite UI for Blazor のバージョン 以降の新しいコンポーネントです。このバージョンより前の古い IgbDatePicker は XDatePicker に名前が変更され、それぞれのドキュメント ページは「非推奨のコンポーネント」の下にあります。

Blazor Date Picker の例

以下は、ユーザーが手動のテキスト入力で日付を選択し、左側のカレンダー アイコンをクリックしてナビゲートできるようになったときに、Date Picker がどのように機能するかを示すサンプルです。描画する方法は以下のとおりです。

EXAMPLE

MODULES

RAZOR

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbDatePickerModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">
        <IgbDatePicker @ref="DatePicker"/>
    </div>
</div>

@code {
    

    public IgbDatePicker DatePicker { get; set; }
}razorコピー

このサンプルが気に入りましたか? 完全な Ignite UI for Blazorツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。

無料で試してみる

Blazor Date Picker を使用した作業の開始

IgbDatePicker コンポーネントの使用を開始するには、最初にそのモジュールを登録する必要があります。

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbDatePickerModule));
razor

スタイルを IgbDatePicker コンポーネントに適用するには、追加の CSS ファイルをリンクする必要もあります。以下は、Blazor WebAssembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります:

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
razor

Ignite UI for Blazor の完全な概要については、作業の開始トピックを参照してください。

Blazor Date Picker コンポーネントの使用

日付ピッカーの表示

デフォルトの dropdown 状態の IgbDatePicker をインスタンス化するには、以下のコードを使用してください。

<IgbDatePicker @ref="DatePicker"></IgbDatePicker>
razor

オプション

IgbDatePicker は date にバインドできます。

<IgbDatePicker @ref="DatePicker" Value="@SelectedDate">
</IgbDatePicker>

@code {

    public DateTime SelectedDate { get; set; }
    public IgbDatePicker DatePicker { get; set; }

    protected override void OnInitialized()
    {
        this.SelectedDate = DateTime.Today;
    }
}
Razor

コンポーネントの投影

prefix スロットと suffix スロットを使用すると、入力のメイン コンテンツの前後に異なるコンテンツを追加できます。

<IgbDatePicker @ref="DatePicker">
    <IgbIcon 
        Slot="suffix" 
        IconName="arrow_upward" 
        Collection="bootstrap" 
        Class="small" 
        @onclick="() => DatePicker.StepUp(DatePart.Month)">
    </IgbIcon>
</IgbDatePicker>
razor

上記のスニペットでは、​​入力の最後、デフォルトのクリア アイコンの直後に追加のアイコンが追加されます。プレフィックスとサフィックスを次々に積み重ねることができるため、これによってデフォルトのトグル アイコンが削除されることはありません。

トグル アイコンとクリア アイコンのカスタマイズ

カレンダーとクリア アイコンは、calendar スロットと clear スロットを使用してテンプレート化できます。

<IgbDatePicker>
    <IgbIcon Slot="calendar" IconName="calendar" Collection="material" Class="small"></IgbIcon>
    <IgbIcon Slot="clear" IconName="delete" Collection="material" Class="small"></IgbIcon>
</IgbDatePicker>
razor

カスタム アクション ボタン

ピッカーのアクション ボタンは、actions スロットを使用してテンプレート化できます。

<IgbDatePicker>
    <IgbButton Slot="actions" @onclick="() => DatePicker.ShowWeekNumbers = true">Show Week Numbers</IgbButton>
</IgbDatePicker>
razor

キーボード ナビゲーション

IgbDatePicker には直感的なキーボード ナビゲーションがあり、マウスに触れることなく、さまざまな DatePart を簡単に増分、減分、またはジャンプできます。

キー	説明
←	1 文字を先頭に移動
→	1 文字を最後に移動
Home	最初に移動
End	最後に移動
Ctrl / Command + ←	日付 / 時刻セクションの先頭に移動 - 現在のセクションまたは左側のセクション
Ctrl / Command + →	日付 / 時刻セクションの最後に移動 - 現在または右側のセクション
日付 / 時刻部分にフォーカス + ↓	日付 / 時刻部分を減少
日付 / 時刻部分にフォーカス + ↑	日付 / 時刻部分を増加
Ctrl / Command + ;	現在の日付 / 時刻をエディターの値として設定
Esc	カレンダーのポップアップを閉じて、入力フィールドにフォーカを合わせます。

例

ダイアログ モード

DatePicker は dialog モードもサポートしています。

<IgbDatePicker Mode="PickerMode.Dialog"></IgbDatePicker>
razor

EXAMPLE

MODULES

RAZOR

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbDatePickerModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">
        <IgbDatePicker @ref="DatePicker" Mode="PickerMode.Dialog"/>
    </div>
</div>

@code {
    

    public IgbDatePicker DatePicker { get; set; }
}razorコピー

表示および入力形式

InputFormat および DisplayFormat は、ピッカーのエディターが指定された形式に従うように設定できるプロパティです。InputFormat はロケール ベースであるため、何も指定されていない場合、ピッカーはデフォルトでブラウザーで使用されるものになります。

注意すべき点は、Date Picker コンポーネントが date と month の部分がない形式で提供された場合、それらの部分に常に先行ゼロを追加することです。例えば、d/M/yy は dd/MM/yy になります。これは編集中にのみ適用されます。

DisplayFormat は、フォーカスされていないときにピッカーの入力を書式設定するために使用されます。DisplayFormat が指定されていない場合、ピッカーは InputFormat を DisplayFormat として使用します。

詳細については、IgbDateTimeInput 形式のセクションを参照してください。

EXAMPLE

MODULES

RAZOR

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbDatePickerModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">
        <IgbDatePicker @ref="DatePicker" DisplayFormat="shortDate" InputFormat="dd/MM/yy"/>
    </div>
</div>

@code {
    

    public IgbDatePicker DatePicker { get; set; }
}razorコピー

増加および減少

IgbDatePicker は、StepUp メソッドと StepDown メソッドを公開します。これらは両方とも IgbDateTimeInput から取得され、現在設定されている日付の特定の DatePart を増加および減少するために使用できます。

<IgbDatePicker @ref="DatePicker">
    <IgbIcon 
        Slot="prefix"
        IconName="arrow_upward"
        Collection="material"               
        @onclick="() => DatePicker.StepUp(DatePart.Month)">
    </IgbIcon>
    <IgbIcon 
        Slot="suffix"
        IconName="arrow_downward"
        Collection="material"
        @onclick="() => DatePicker.StepDown(DatePart.Month)">
    </IgbIcon>
</IgbDatePicker>
razor

フォーム

IgbDatePicker はフォーム要素で使用できます。コンポーネントの Min プロパティと Max プロパティはフォーム検証機能として機能します。

フォームでは、コンポーネントの Change イベントを処理し、ラベルの値を更新できます。

EXAMPLE

MODULES

RAZOR

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbDatePickerModule));
            builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule));

            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">
        <form @ref="Form">
            <div>
                <IgbDatePicker
                    @ref="DatePicker"
                    Min="@MinDate"
                    Max="@MaxDate"
                    Value="@SelectedDate"
                    Change="HandleDateChange" />
                <IgbButton onclick="@HandleReset"><span>Reset</span></IgbButton>
            </div>
        </form >
        <p>Date picker value: @(SelectedDate != default ? SelectedDate.ToString("G") : "None")</p>
        <p>Form valid: @FormStatus</p>
    </div>
</div>

@code {
    private IgbDatePicker DatePicker { get; set; }
    private ElementReference Form { get; set; }
    private DateTime SelectedDate { get; set; } = DateTime.Today;
    private DateTime MinDate { get; set; }
    private DateTime MaxDate { get; set; }
    private String FormStatus { get; set; } = "true";

    protected override void OnInitialized()
    {

        var initialDate = DateTime.Today;
        MinDate = initialDate.AddDays(-10);
        MaxDate = initialDate.AddDays(15);

        UpdateFormStatus();
    }

    private void UpdateFormStatus()
    {
        FormStatus = "true";

        if (SelectedDate < MinDate || SelectedDate > MaxDate)
    {
            FormStatus = "false";
        }
    }

    private void HandleDateChange(IgbComponentDateValueChangedEventArgs e)
    {
        if (DateTime.TryParse(e.Detail.ToString(), out var newValue))
        {
            SelectedDate = newValue;
        }
        else
        {
            SelectedDate = default;
        }
        UpdateFormStatus();
    }

    private void HandleReset(MouseEventArgs e)
    {
        SelectedDate = default;
        DatePicker.Clear();
        UpdateFormStatus();
    }

}razorコピー

カレンダー固有の設定

IgbDatePicker は、Date Picker が公開するプロパティを通じて、カレンダーの設定の一部を変更できます。これらの一部には、ピッカーが展開されたときに複数のカレンダーを表示できる VisibleMonths、週の開始日を決定する WeekStart、年の各週の番号を表示する ShowWeekNumbers などが含まれます。

インターナショナリゼーション

IgbDatePicker のローカライズは、Locale 入力で制御できます。

以下は日本ロケール定義を持つ IgbDatePicker です。

<IgbDatePicker Locale="ja-JP"></IgbDatePicker>
razor

スタイル設定

IgbDatePicker コンポーネントは IgbInput コンポーネントおよび IgbCalendar コンポーネントから派生するため、使用可能なすべての CSS パーツを公開します。詳細については、Input のスタイル設定と Calendar のスタイル設定を参照してください。

igc-date-picker::part(header) {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
}
igc-date-picker::part(calendar-content) {
  background-color: var(--ig-surface-300);
}
igc-date-picker::part(date-inner current) {
  color: var(--ig-info-300);
  background-color: var(--ig-surface-300);
}
igc-date-picker::part(navigation-button):hover,
igc-date-picker::part(months-navigation):hover,
igc-date-picker::part(years-navigation):hover {
  color: var(--ig-secondary-500);
}
igc-date-picker::part(month-inner current),
igc-date-picker::part(year-inner current),
igc-date-picker::part(navigation-button),
igc-date-picker::part(months-navigation),
igc-date-picker::part(years-navigation) {
  color: var(--ig-info-300);
}
igc-date-picker::part(date-inner selected),
igc-date-picker::part(month-inner selected),
igc-date-picker::part(year-inner selected) {
  color: var(--ig-secondary-500-contrast);
  background-color: var(--ig-secondary-500);
}
css

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbDatePickerModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/

igc-date-picker::part(header) {
    background-color: #345779;
    color: #ffffff;
}
igc-date-picker::part(calendar-content) {
    background-color: #fdfdfd;
}
igc-date-picker::part(date-inner current) {
    color: #2dabe8;
    background-color: #fdfdfd;
}
igc-date-picker::part(navigation-button):hover,
igc-date-picker::part(months-navigation):hover,
igc-date-picker::part(years-navigation):hover {
    color: #345779;
}
igc-date-picker::part(month-inner current),
igc-date-picker::part(year-inner current),
igc-date-picker::part(navigation-button),
igc-date-picker::part(months-navigation),
igc-date-picker::part(years-navigation) {
    color: #2dabe8;
}
igc-date-picker::part(date-inner selected),
igc-date-picker::part(month-inner selected),
igc-date-picker::part(year-inner selected) {
    color: #fdfdfd;
    background-color: #345779;
}
</style>
<div class="container vertical">
    <div class="container vertical">
        <IgbDatePicker @ref="DatePicker" Mode="PickerMode.Dialog"/>
    </div>
</div>

@code {
    

    public IgbDatePicker DatePicker { get; set; }
}razorコピー

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/

igc-date-picker::part(header) {
    background-color: #345779;
    color: #ffffff;
}
igc-date-picker::part(calendar-content) {
    background-color: #fdfdfd;
}
igc-date-picker::part(date-inner current) {
    color: #2dabe8;
    background-color: #fdfdfd;
}
igc-date-picker::part(navigation-button):hover,
igc-date-picker::part(months-navigation):hover,
igc-date-picker::part(years-navigation):hover {
    color: #345779;
}
igc-date-picker::part(month-inner current),
igc-date-picker::part(year-inner current),
igc-date-picker::part(navigation-button),
igc-date-picker::part(months-navigation),
igc-date-picker::part(years-navigation) {
    color: #2dabe8;
}
igc-date-picker::part(date-inner selected),
igc-date-picker::part(month-inner selected),
igc-date-picker::part(year-inner selected) {
    color: #fdfdfd;
    background-color: #345779;
}
cssコピー

API リファレンス

• IgbInput
• IgbCalendar
• IgbDatePicker
• スタイル設定 & テーマ

その他のリソース

• Ignite UI for Blazor フォーラム (英語)
• Ignite UI for Blazor GitHub (英語)