Blazor XDate Picker (XDate ピッカー) の概要

XDate Picker コンポーネントは、ドロップダウンカレンダー UI を使用して日、月、年を直感的に選択できます。これは、アプリケーションユーザーが特定の日付を選択する必要があり、複数のエディターを組み合わせて日付範囲 UI を作成する場合に便利です。

XDatePicker コンポーネントは、Ignite UI for Blazor のバージョン以降では非推奨です。サポートされている最新の Ignite UI for Blazor Date Picker コンポーネントについては、「スケジュール」のそれぞれのページを参照してください。

Blazor XDate Picker の例

このサンプルは、単一の日付を選択するオプションを使用して XDatePicker を作成する方法を示しています。

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(IgbXDatePickerModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">
        <IgbXDatePicker @ref="DatePicker" Height="60px" Width="220px"
                    Value="@SelectedDate"
                    ShowTodayButton="true"
                    ShowWeekNumbers="true"/>
    </div>
</div>

@code {

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

    protected override void OnInitialized()
    {

        this.SelectedDate = DateTime.Today;
    }
}razor

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

コンポーネントモジュール

XDate Picker コンポーネントを使用するには、以下のモジュールを登録する必要があります。

// in Program.cs file

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

使用方法

Blazor XDate Picker エディターコンポーネントは、デフォルトでは、テキスト領域、カレンダードロップダウンボタン、およびクリアボタンの 3 つの構成されます。これらの領域について以下に説明します。

テキスト領域: エディターの Value プロパティに保存されている選択した日付を表示します。
カレンダー: カレンダーボタンをクリックすると、XDate Picker のカレンダードロップダウンが開きます。カレンダーが開き、現在選択されている Value の月が表示されます。Value が指定されていない場合、カレンダーは現在の日付に対応する月を表示します。上部の月をクリックすると、月のリストが表示され、年も同様です。月と年の可視化の左右にある矢印ボタンは、表示されている月を時系列で増減します。
クリアボタン: x アイコンは現在の値をクリアします。

プロパティ	タイプ	説明
`IconColor`	string	カレンダーボタンの色を変更します。
`AllowTextInput`	bool	このプロパティを true に切り替えることで、XDate Picker の値を入力して変更できます。
`DateFormat`	enum	デフォルトは DateShort です。例: 'mm/dd/yyyy'。DateLong に設定すると、エディターに表示される曜日を含めた日付が表示されます。例: 2021年4月14日水曜日。
`FirstDayOfWeek`	enum	デフォルトは日曜日です。特定の曜日が、カレンダーの各週の行の最初の日として使用されます。例えば、月曜日から日曜日。
`FormatString`	string	DateShort を使用すると、日付の形式を構成できます。例えば、'dd/mm/yyyy'。`DateFormat` の DateLong と `FormatString` が設定されている場合、`DateFormat` は無視されることに注意してください。
`Label`	string	XDate Picker の左上隅の日付の上にカスタムテキストを表示します。
`MinDate`	DateTime	以前の日付が選択または表示されないように制限します。
`MaxDate`	DateTime	後の日付が選択または表示されないように制限します。
`Placeholder`	string	カレンダーの編集部分の値がクリアされたときに表示されるカスタム文字列。
`ShowClearButton`	bool	デフォルトは true で、クリアボタンはカレンダーボタンのすぐ左にあり、X で視覚化されます。クリックすると、XDate Picker の `Value` がクリアされます。クリアボタンの表示は、オンとオフを切り替えることができます。
`ShowTodayButton`	bool	本日は、カレンダーが開かれた日付のすぐ下に表示されます。クリックすると、現在の日付が選択されます。本日のボタンの表示は、オンとオフを切り替えることができます。
`ShowWeekNumbers`	bool	週番号は、XDate Picker のドロップダウン部分の日付のすべての行の左側に番号として表示できます。週番号の表示のオンとオフを切り替えることができます。
`FirstWeekOfYear`	enum	年間の週の開始番号を構成します。FirstDay、FirstFourDayWeek、FirstFullWeek に設定できます。
`OpenOnFocus`	bool	デフォルトでは、XDate Picker のドロップダウン部分はシングルクリックで開かれ、ユーザーはカレンダーボタンをクリックしてカレンダーをドロップダウンする必要があります。
`Value`	date	XDate Picker の値を設定し、ドロップダウンカレンダーで選択します。

ユーザーは、コントロールのさまざまなテキストプロパティを使用して XDate Picker のフォントをカスタマイズできます。使用できるプロパティは TextColor、TextFontFamily、TextFontSize、TextFontStyle、および TextFontWeight です。

編集

次の例は、XDatePicker で編集を有効にする方法を示しています。

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(IgbXDatePickerModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">
        <IgbXDatePicker @ref="DatePicker" Height="60px" Width="220px"
                    Value="@SelectedDate"
                    AllowTextInput="true"/>
    </div>
</div>

@code {

    public DateTime SelectedDate { get; set; }
    public IgbXDatePicker DatePicker { get; set; }
    protected override void OnInitialized()
    {

        this.SelectedDate = DateTime.Today;
    }
}razor

日付制限

次の例は、XDatePicker で選択した日付を制限する方法を示しています。

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(IgbXDatePickerModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
        <div class="options vertical">
        <div class="options horizontal">
            <label class="options-label">Minimum Date: @MinDate"</label>
        </div>
        <div class="options horizontal">
            <label class="options-label">Maximum Date: @MaxDate"</label>
        </div>
        </div>
        <div class="container vertical">
            <IgbXDatePicker @ref="DatePicker" Height="60px" Width="220px"
                        Value="@SelectedDate"
                        MinDate="@MinDate"
                        MaxDate="@MaxDate"
                        AllowTextInput="false" />
        </div>
    </div>

@code {
    public DateTime SelectedDate { get; set; }
    public DateTime MinDate { get; set; }
    public DateTime MaxDate { get; set; }
    public IgbXDatePicker DatePicker { get; set; }

    protected override void OnInitialized()
    {

        this.SelectedDate = DateTime.Today;
        var current = DateTime.Today;
        this.MinDate = new DateTime(DateTime.Today.Year, DateTime.Today.Month, 1);
        this.MaxDate = new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.DaysInMonth(DateTime.Today.Year, DateTime.Today.Month));
    }
}razor

日付の書式

次の例は、XDatePicker で長い日付を適用する方法を示しています。

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(IgbXDatePickerModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="options horizontal">
        <label>
            Date Formats:
            <select @bind="DateFormat">
                <option>@DateFormats.DateLong</option>
                <option>@DateFormats.DateShort</option>
            </select>
        </label>
    </div>
    <div class="container vertical">
        <IgbXDatePicker @ref="DatePicker" Height="60px" Width="300px"
                    Value="@SelectedDate"
                    DateFormat="@DateFormat"
                    AllowTextInput="false" />
    </div>
</div>

@code {

    public DateTime SelectedDate { get; set; }
    public IgbXDatePicker DatePicker { get; set; }
    public DateFormats DateFormat { get; set; }

    protected override void OnInitialized()
    {

        this.SelectedDate = DateTime.Today;
        this.DateFormat = DateFormats.DateLong;
    }
}razor

日付範囲

次の例は、複数の XDatePicker コントロールを組み合わせる方法を示しています。

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(IgbXDatePickerModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="dateRanges">
        <span class="caption">From:  </span>
        <IgbXDatePicker Height="50px" Width="220px" Value="@FromDate" SelectedValueChanged="FromDateValueChanged"/>
        <span class="caption">  To:  </span>
        <IgbXDatePicker Height="50px" Width="220px" Value="@ToDate" SelectedValueChanged="ToDateValueChanged"/>
    </div>
</div>

<style>
    .dateRanges {
        display: flex;
    }

    .caption {
        align-self: center;
        margin-left: 25px;
        margin-right: 10px;
        margin-top: 8px;
    }
</style>

@code {
    

    public DateTime FromDate { get; set; }
    public DateTime ToDate { get; set; }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            this.FromDate = DateTime.Today;
            this.ToDate = DateTime.Today.AddDays(1);
            StateHasChanged();
        }
    }

    public void FromDateValueChanged(IgbSelectedValueChangedEventArgs e)
    {
        FromDate = e.NewValue;
        if(this.FromDate > this.ToDate)
        {
            this.ToDate = this.FromDate.AddDays(1);
            StateHasChanged();
        }
    }

    public void ToDateValueChanged(IgbSelectedValueChangedEventArgs e)
    {
        this.ToDate = e.NewValue;
        if (this.ToDate < this.FromDate)
        {
            this.FromDate = e.NewValue.AddDays(-1);
            StateHasChanged();
        }
    }
}razor

API リファレンス

以下は上記のセクションで説明した API メンバーのリストです。

XDatePicker
IconColor
AllowTextInput
DateFormat
FirstDayOfWeek
FormatString
Label
MinDate
MaxDate
Placeholder
ShowClearButton
ShowTodayButton
ShowWeekNumbers
FirstWeekOfYear
OpenOnFocus
Value
TextColor
TextFontFamily
TextFontSize
TextFontStyle
TextFontWeight