Blazor Date Time Input (日時入力) の概要

Ignite UI for Blazor Date Time Input を使用すると、ユーザーは選択した入力要素で日付と時刻を設定および編集できます。ユーザーは、編集可能なマスクされた入力を使用して、日付と時刻の両方のパーツを編集できます。さらに、検証に最小値と最大値だけでなく、希望の表示形式および入力形式の設定を指定できます。

EXAMPLE

MODULES

RAZOR

using System;
using System.Net.Http;
using Microsoft.AspNetCore.Components.Web;
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
using BlazorClientApp;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

builder.Services.AddIgniteUIBlazor(
    typeof(IgbIconModule),
    typeof(IgbDateTimeInputModule),
    typeof(IgbRadioGroupModule),
    typeof(IgbRadioModule),
    typeof(IgbRatingModule),
    typeof(IgbAccordionModule),
    typeof(IgbExpansionPanelModule),
    typeof(IgbCheckboxModule),
    typeof(IgbSliderModule),
    typeof(IgbRangeSliderModule)
);

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

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbDateTimeInput @ref="DateTimeInputRef">
        <IgbIcon IconName="clear" Collection="myIcons" slot="prefix" @onclick="OnClear"></IgbIcon>
        <IgbIcon IconName="up" Collection="myIcons" slot="suffix" @onclick="OnStepUp"></IgbIcon>
        <IgbIcon IconName="down" Collection="myIcons" slot="suffix" @onclick="OnStepDown"></IgbIcon>
    </IgbDateTimeInput>
    <IgbIcon @ref="RegisterIconRef"></IgbIcon>

</div>

@code {
    

    IgbDateTimeInput? DateTimeInputRef;
    IgbIcon? RegisterIconRef;

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && RegisterIconRef != null)
        {
            await RegisterIconRef.EnsureReady();
            var upIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M7 14l5-5 5 5z\"/></svg>";
            var downIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M7 10l5 5 5-5z\"/></svg>";
            var clearIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/></svg>";
            await RegisterIconRef.RegisterIconFromTextAsync("up", upIcon, "myIcons");
            await RegisterIconRef.RegisterIconFromTextAsync("down", downIcon, "myIcons");
            await RegisterIconRef.RegisterIconFromTextAsync("clear", clearIcon, "myIcons");
        }
    }

    public async Task OnClear()
    {
        await DateTimeInputRef?.ClearAsync();
    }

    public async Task OnStepUp()
    {
        await DateTimeInputRef?.StepUpAsync();
    }

    public async Task OnStepDown()
    {
        await DateTimeInputRef?.StepDownAsync();
    }
}razorコピー

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

使用方法

IgbDateTimeInput を使用する前に、次のように登録する必要があります:

// in Program.cs file

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

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

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

値バインディング

IgbDateTimeInput コンポーネントの値を設定する最も簡単な方法は、Date オブジェクトを Value プロパティに渡すことです。

<IgbDateTimeInput @ref="DateTimeInputRef" Value="@Date">
    <IgbIcon IconName="clear" Collection="myIcons" slot="prefix" @onclick="OnClear"></IgbIcon>
</IgbDateTimeInput>
razor

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

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

キー	説明
←	1 文字を先頭に移動
→	1 文字を最後に移動
Home	最初に移動
End	最後に移動
Ctrl / Command + ←	日付 / 時刻セクションの先頭に移動 - 現在のセクションまたは左側のセクション
Ctrl / Command + →	日付 / 時刻セクションの最後に移動 - 現在または右側のセクション
日付 / 時刻のパーツにフォーカス + ↓	日付 / 時刻のパーツを減分
日付 / 時刻のパーツにフォーカス + ↑	日付 / 時刻のパーツを増分
Ctrl / Command + ;	現在の日付 / 時刻をエディターの値として設定

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

無料で試してみる

書式の設定

IgbDateTimeInput は、さまざまな表示形式と入力形式をサポートしています。

Intl.DateTimeFormat を使用して、long と short、medium と full などの事前定義された書式オプションをサポートできるようにします。さらに、dd-MM-yy などのサポートされている文字から構築されたカスタム文字列を受け入れることもできます。また、DisplayFormat が指定されていない場合、コンポーネントは InputFormat をそのまま使用します。

入力書式

次の表は、コンポーネントの InputFormat でサポートされている形式を示しています。

書式	説明
d	日付。編集中は先行ゼロで強制されます。
dd	先行ゼロが明示的に設定された日付。
M	月。編集中は先行ゼロで強制されます。
MM	先行ゼロが明示的に設定されている月。
yy	短い年形式。
yyyy	完全な年形式。
h	12 時間形式の時間。編集中は先行ゼロで強制されます。
hh	明示的に先行ゼロが設定された 12 時間形式の時間。
H	24 時間形式の時間。編集中は先行ゼロで強制されます。
HH	明示的に先行ゼロが設定された 24 時間形式の時間。
m	分。編集中に先行ゼロで強制されます。
mm	先行ゼロが明示的に設定された分。
tt	12 時間形式の AM/PM セクション。

特定の入力形式を設定するには、それを文字列として IgbDateTimeInput に渡します。これにより、予想されるユーザー入力形式と mask の両方が設定されます。さらに、InputFormat はロケール ベースであるため、何も指定されていない場合、エディターはデフォルトで dd/MM/yyyy になります。

<IgbDateTimeInput @ref="DateTimeInputRef" InputFormat="dd-MM-yy" DisplayFormat="medium">
    <IgbIcon IconName="clear" Collection="myIcons" slot="prefix" @onclick="OnClear"></IgbIcon>
</IgbDateTimeInput>
razor

以下は結果です:

EXAMPLE

MODULES

RAZOR

using System;
using System.Net.Http;
using Microsoft.AspNetCore.Components.Web;
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
using BlazorClientApp;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

builder.Services.AddIgniteUIBlazor(
    typeof(IgbIconModule),
    typeof(IgbDateTimeInputModule),
    typeof(IgbRadioGroupModule),
    typeof(IgbRadioModule),
    typeof(IgbRatingModule),
    typeof(IgbAccordionModule),
    typeof(IgbExpansionPanelModule),
    typeof(IgbCheckboxModule),
    typeof(IgbSliderModule),
    typeof(IgbRangeSliderModule)
);

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

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbDateTimeInput @ref="DateTimeInputRef" InputFormat="dd-MM-yy" DisplayFormat="medium">
        <IgbIcon IconName="clear" Collection="myIcons" slot="prefix" @onclick="OnClear"></IgbIcon>
        <IgbIcon IconName="up" Collection="myIcons" slot="suffix" @onclick="OnStepUp"></IgbIcon>
        <IgbIcon IconName="down" Collection="myIcons" slot="suffix" @onclick="OnStepDown"></IgbIcon>
    </IgbDateTimeInput>
    <IgbIcon @ref="RegisterIconRef"/>
</div>

@code {
    
    IgbDateTimeInput? DateTimeInputRef;
    IgbIcon? RegisterIconRef;

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && RegisterIconRef != null)
        {
            await RegisterIconRef.EnsureReady();
            var upIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M7 14l5-5 5 5z\"/></svg>";
            var downIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M7 10l5 5 5-5z\"/></svg>";
            var clearIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/></svg>";
            await RegisterIconRef.RegisterIconFromTextAsync("up", upIcon, "myIcons");
            await RegisterIconRef.RegisterIconFromTextAsync("down", downIcon, "myIcons");
            await RegisterIconRef.RegisterIconFromTextAsync("clear", clearIcon, "myIcons");
        }
    }
    public async Task OnClear()
    {
        await DateTimeInputRef?.ClearAsync();
    }

    public async Task OnStepUp()
    {
        await DateTimeInputRef?.StepUpAsync();
    }
    public async Task OnStepDown()
    {
        await DateTimeInputRef?.StepDownAsync();
    }
}razorコピー

表示書式

日時入力は、さまざまな方法で日付 / 時刻を表示するための事前定義された形式を公開します。以下の例はすべて、en-US ロケールで示されています。

オプション	例
short	7/17/22, 12:00 AM
medium	Jul 17, 2022, 12:00:00 AM
long	July 17, 2022 at 12:00:00 AM GMT+3
full	Sunday, July 17, 2022 at 12:00:00 AM Eastern European Summer Time
shortDate	7/17/22
mediumDate	Jul 17, 2022
longDate	July 17, 2022
fullDate	Sunday, July 17, 2022
shortTime	12:00 AM
mediumTime	12:00:00 AM
longTime	12:00:00 AM GMT+3
fullTime	12:00:00 AM Eastern European Summer Time

さらに、ユーザーは、次の表で説明されているサポートされている記号を使用して、displayFormat 文字列を作成できます。

タイプ	書式	説明	例
日付	d	最小桁数	7, 17
	dd	ゼロ埋込み	07, 17
月	M	最小桁数	3, 10
	MM	ゼロ埋込み	03, 10
	MMM	省略	Oct
	MMMM	ワイド	October
	MMMMM	狭い	O
年	y	数値	2022
	yy	2 桁	22
	yyy	数値	2022
	yyyy	数値	2022
12 時間	h	最小桁数	1, 12
	hh	ゼロ埋込み	01, 12
24 時間	H	最小桁数	1, 23
	HH	ゼロ埋込み	01, 23
分	m	最小桁数	1, 59
	mm	ゼロ埋込み	01, 59
秒	s	最小桁数	1, 59
	ss	ゼロ埋込み	01, 59
期間	t	省略	AM, PM
	tt	省略	AM, PM
	ttt	短い	noon
	tttt	長い	noon
	ttttt	狭い	n

多くのロケールは、指定された書式に関係なく、同じ期間文字列を使用します。また、12 時間制を使用した場合にのみ効果があります。

最小値 / 最大値

Min および Max プロパティを指定して、コンポーネントの入力を制限し、有効性を制御できます。Value プロパティと同様に、string 型にすることができます。

<IgbDateTimeInput @ref="DateTimeInputRef" Min="@MinDate" Max="@MaxDate">
    <IgbIcon IconName="clear" Collection="myIcons" slot="prefix" @onclick="OnClear"></IgbIcon>
</IgbDateTimeInput>
razor

すべてがうまくいった場合、値が指定された日付よりも大きいか小さい場合、コンポーネントは invalid になります。以下の例をご覧ください:

EXAMPLE

MODULES

RAZOR

using System;
using System.Net.Http;
using Microsoft.AspNetCore.Components.Web;
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
using BlazorClientApp;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

builder.Services.AddIgniteUIBlazor(
    typeof(IgbIconModule),
    typeof(IgbDateTimeInputModule),
    typeof(IgbRadioGroupModule),
    typeof(IgbRadioModule),
    typeof(IgbRatingModule),
    typeof(IgbAccordionModule),
    typeof(IgbExpansionPanelModule),
    typeof(IgbCheckboxModule),
    typeof(IgbSliderModule),
    typeof(IgbRangeSliderModule)
);

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

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbDateTimeInput @ref="DateTimeInputRef" Min="@MinDate" Max="@MaxDate">
        <IgbIcon IconName="clear" Collection="myIcons" slot="prefix" @onclick="OnClear"></IgbIcon>
        <IgbIcon IconName="up" Collection="myIcons" slot="suffix" @onclick="OnStepUp"></IgbIcon>
        <IgbIcon IconName="down" Collection="myIcons" slot="suffix" @onclick="OnStepDown"></IgbIcon>
    </IgbDateTimeInput>
    <IgbIcon @ref="RegisterIconRef"/>
</div>

@code {
    
    IgbDateTimeInput? DateTimeInputRef;
    IgbIcon? RegisterIconRef;

    DateTime MinDate = new DateTime(2021, 1, 1);
    DateTime MaxDate = new DateTime(2022, 1, 1);

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && RegisterIconRef != null)
        {
            await RegisterIconRef.EnsureReady();
            var upIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M7 14l5-5 5 5z\"/></svg>";
            var downIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M7 10l5 5 5-5z\"/></svg>";
            var clearIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/></svg>";
            await RegisterIconRef.RegisterIconFromTextAsync("up", upIcon, "myIcons");
            await RegisterIconRef.RegisterIconFromTextAsync("down", downIcon, "myIcons");
            await RegisterIconRef.RegisterIconFromTextAsync("clear", clearIcon, "myIcons");
        }
    }

    public async Task OnClear()
    {
        await DateTimeInputRef?.ClearAsync();
    }

    public async Task OnStepUp()
    {
        await DateTimeInputRef?.StepUpAsync();
    }
    public async Task OnStepDown()
    {
        await DateTimeInputRef?.StepDownAsync();
    }
}razorコピー

ステップアップ / ステップダウン

IgbDateTimeInput は、公開な StepUp メソッドと StepDown メソッドを公開します。現在設定されている日付と時刻の特定の DatePart を増減し、いくつかの方法で使用できます。

最初のシナリオでは、特定の DatePart がメソッドに渡されない場合、指定した InputFormat および内部コンポーネントの実装に基づいてデフォルトの DatePart が増減します。2 番目のシナリオでは、さまざまな要件を満たすために操作する DatePart を明示的に指定できます。また、どちらのメソッドも、stepUp/stepDown ステップを設定するために使用できるタイプ番号のオプションの delta パラメーターを受け入れます。

さらに、SpinDelta は、各日時セグメントに異なる delta を適用するために使用できるプロパティです。キーボード、マウス ホイール、または StepUp メソッドと StepDown メソッドを使用してスピンする場合に適用されます。ただし、SpinDelta よりも優先されるため、delta パラメーターが提供されていない場合に限ります。

以下の例をご覧ください。

EXAMPLE

MODULES

RAZOR

using System;
using System.Net.Http;
using Microsoft.AspNetCore.Components.Web;
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
using BlazorClientApp;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

builder.Services.AddIgniteUIBlazor(
    typeof(IgbIconModule),
    typeof(IgbDateTimeInputModule),
    typeof(IgbRadioGroupModule),
    typeof(IgbRadioModule),
    typeof(IgbRatingModule),
    typeof(IgbAccordionModule),
    typeof(IgbExpansionPanelModule),
    typeof(IgbCheckboxModule),
    typeof(IgbSliderModule),
    typeof(IgbRangeSliderModule)
);

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

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbDateTimeInput @ref="DateTimeInputRef" SpinDelta="@SpinDelta">
        <IgbIcon IconName="clear" Collection="myIcons" slot="prefix" @onclick="OnClear"></IgbIcon>
        <IgbIcon IconName="up" Collection="myIcons" slot="suffix" @onclick="OnStepUp"></IgbIcon>
        <IgbIcon IconName="down" Collection="myIcons" slot="suffix" @onclick="OnStepDown"></IgbIcon>
    </IgbDateTimeInput>
    <IgbIcon @ref="RegisterIconRef"/>
</div>

@code {
    
    IgbDateTimeInput? DateTimeInputRef;
    IgbIcon? RegisterIconRef;

    IgbDatePartDeltas SpinDelta = new IgbDatePartDeltas()
    {
        Date = 2,
        Month = 3,
        Year = 10
    };

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && RegisterIconRef != null)
        {
            await RegisterIconRef.EnsureReady();
            var upIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M7 14l5-5 5 5z\"/></svg>";
            var downIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M7 10l5 5 5-5z\"/></svg>";
            var clearIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/></svg>";
            await RegisterIconRef.RegisterIconFromTextAsync("up", upIcon, "myIcons");
            await RegisterIconRef.RegisterIconFromTextAsync("down", downIcon, "myIcons");
            await RegisterIconRef.RegisterIconFromTextAsync("clear", clearIcon, "myIcons");
        }
    }

    public async Task OnClear()
    {
        await DateTimeInputRef?.ClearAsync();
    }
    public async Task OnStepUp()
    {
        await DateTimeInputRef?.StepUpAsync(DatePart.Month, SpinDelta.Month);
    }
    public async Task OnStepDown()
    {
        await DateTimeInputRef?.StepDownAsync(DatePart.Date, SpinDelta.Date);
    }
}razorコピー

スタイル設定

IgbDateTimeInput コンポーネントは、その内部要素のほとんどすべての CSS パーツを公開します。次の表に、公開されているすべての CSS パーツを示します。

名前	説明
container	すべての主要な入力要素を保持するメイン ラッパー。
input	ネイティブ入力要素。
label	ネイティブ ラベル要素。
prefix	プレフィックス ラッパー。
suffix	サフィックス ラッパー。
helper-text	ヘルパー テキスト ラッパー。

igc-date-time-input::part(input) {
  background-color: var(--ig-primary-100);
  border-color: var(--ig-secondary-500);
  box-shadow: none;
}

igc-date-time-input::part(prefix),
igc-date-time-input::part(suffix) {
  color: var(--ig-primary-600-contrast);
  background-color: var(--ig-primary-500);
  border-color: var(--ig-secondary-500);
}
css

EXAMPLE

API リファレンス

• IgbInput
• IgbMaskInput
• IgbIcon
• IgbDateTimeInput
• スタイル設定 & テーマ

その他のリソース

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