Blazor Date Time Input (日時入力) の概要
Ignite UI for Blazor Date Time Input を使用すると、ユーザーは選択した入力要素で日付と時刻を設定および編集できます。ユーザーは、編集可能なマスクされた入力を使用して、日付と時刻の両方の部分を編集できます。さらに、検証に最小値と最大値だけでなく、希望の表示形式および入力形式の設定を指定できます。
使用方法
IgbDateTimeInput
を使用する前に、次のように登録する必要があります:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbDateTimeInputModule));
また、IgbDateTimeInput
コンポーネントにスタイルを適用するために、追加の CSS ファイルをリンクする必要があります。以下は、Blazor WebAssembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
値バインディング
IgbDateTimeInput
コンポーネントの値を設定する最も簡単な方法は、Date オブジェクトを Value
プロパティに渡すことです。
<IgbDateTimeInput @ref="DateTimeInputRef" Value="@Date">
<IgbIcon IconName="clear" Collection="myIcons" slot="prefix" @onclick="OnClear"></IgbIcon>
</IgbDateTimeInput>
キーボード ナビゲーション
IgbDateTimeInput
には直感的なキーボード ナビゲーションがあり、マウスに触れることなく、さまざまな DatePart
を簡単に増分、減分、またはジャンプできます。
キー | 説明 |
---|---|
← | 1 文字を先頭に移動 |
→ | 1 文字を最後に移動 |
Home | 最初に移動 |
End | 最後に移動 |
Ctrl / Command + ← | 日付 / 時刻セクションの先頭に移動 - 現在のセクションまたは左側のセクション |
Ctrl / Command + → | 日付 / 時刻セクションの最後に移動 - 現在または右側のセクション |
日付 / 時刻の部分にフォーカス + ↓ | 日付 / 時刻部分を減分 |
日付 / 時刻の部分にフォーカス + ↑ | 日付 / 時刻の部分を増分 |
Ctrl / Command + ; | 現在の日付 / 時刻をエディターの値として設定 |
書式の設定
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>
以下は結果です:
表示書式
日時入力は、さまざまな方法で日付 / 時刻を表示するための事前定義された形式を公開します。以下の例はすべて、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 |
[!Note] 多くのロケールは、指定された書式に関係なく、同じ期間文字列を使用します。また、12 時間制を使用した場合にのみ効果があります。
最小値 / 最大値
Min
および Max
プロパティを指定して、コンポーネントの入力を制限し、有効性を制御できます。Value
プロパティと同様に、string
型にすることができます。
<IgbDateTimeInput @ref="DateTimeInputRef" Min="@MinDate" Max="@MaxDate">
<IgbIcon IconName="clear" Collection="myIcons" slot="prefix" @onclick="OnClear"></IgbIcon>
</IgbDateTimeInput>
すべてがうまくいった場合、値が指定された日付よりも大きいか小さい場合、コンポーネントは invalid
になります。以下の例をご覧ください:
ステップアップ / ステップダウン
IgbDateTimeInput
は、公開な StepUp
メソッドと StepDown
メソッドを公開します。現在設定されている日付と時刻の特定の DatePart
を増減し、いくつかの方法で使用できます。
最初のシナリオでは、特定の DatePart がメソッドに渡されない場合、指定した InputFormat
および内部コンポーネントの実装に基づいてデフォルトの DatePart が増減します。2 番目のシナリオでは、さまざまな要件を満たすために操作する DatePart を明示的に指定できます。また、どちらのメソッドも、stepUp/stepDown ステップを設定するために使用できるタイプ番号のオプションの delta
パラメーターを受け入れます。
さらに、SpinDelta
は、各日時セグメントに異なる delta を適用するために使用できるプロパティです。キーボード、マウス ホイール、または StepUp
メソッドと StepDown
メソッドを使用してスピンする場合に適用されます。ただし、SpinDelta
よりも優先されるため、delta パラメーターが提供されていない場合に限ります。
以下の例をご覧ください。
スタイル設定
IgbDateTimeInput
コンポーネントは IgbInput
コンポーネントから派生しているため、使用可能なすべての CSS パーツを公開します。参考のために入力スタイル設定を参照してください。
API リファレンス
IgbInput
IgbMaskInput
IgbIcon
DateParts
IgbDateTimeInput