The Ignite UI for Blazor Date Picker is a feature rich component used for entering a date through manual text input or choosing date values from a calendar dialog that pops up. Lightweight and simple to use, the Date Picker lets users navigate to a desired date with several view options – month, year, and decade. It also supports common validation properties such as minimum and maximum date constraints and required fields.
The Ignite UI for Blazor Date Picker Component lets users pick a single date through a month-view calendar dropdown or editable input field. The Blazor Date Picker also supports a dialog mode for selection from the calendar only, locale-aware and customizable date formatting and validation integration.
The IgbDatePicker is a brand new component from Ignite UI for Blazor version . The old IgbDatePicker prior to this version has been renamed to XDatePicker and its respective documentation page can be found under "Deprecated Components"
Blazor Date Picker Example
Below you can see a sample that demonstrates how the Date Picker works when users are enabled to pick a date through a manual text input and click on the calendar icon on the left to navigate to it. See how to render it.
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 modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync 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
To get started with the IgbDatePicker component, first we need to register its module as follows:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbDatePickerModule));
razor
You will also need to link an additional CSS file to apply the styling to the IgbDatePicker component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:
The above snippet will add an additional icon at the end of the input, right after the default clear icon. This will not remove the default toggle icon, though as prefixes and suffixes can be stacked one after the other.
Customizing the toggle and clear icons
The calendar and clear icon could be templated by using the calendar and clear slots:
The IgbDatePicker has intuitive keyboard navigation that makes it easy to increment, decrement, or jump through different DateParts among others without having to touch the mouse.
Keys
Description
←
Move one character to the beginning
→
Move one character to the end
Home
Move to the beginning
End
Move to the end
Ctrl / Command + ←
Move to the beginning of the date/time section - current one or left one
Ctrl / Command + →
Move to the end of the date/time section - current on or right one
Focus on a date/time part + ↓
Decrements a date/time part
Focus on a date/time part + ↑
Increments a date/time part
Ctrl / Command + ;
Sets the current date/time as the value of the editor
Esc
Closes the calendar pop-up and focuses the input field
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 modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync 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
InputFormat and DisplayFormat are properties which can be set to make the picker's editor follow a specified format. The InputFormat is locale based, so if none is provided, the picker will default to the one used by the browser.
A good thing to note is that the Date Picker Component will always add a leading zero on the date and month portions if they were provided in a format that does not have it, e.g. d/M/yy becomes dd/MM/yy. This applies only during editing.
More information about these can be found in the IgbDateTimeInput format section.
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 modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync 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
The IgbDatePicker exposes StepUp and StepDown methods. Both of which come from the IgbDateTimeInput and can be used for incrementing and decrementing a specific DatePart of the currently set date.
The IgbDatePicker could be used in a form element, the component's Min and Max properties act as form validators.
In forms, we can handle the Change event of the component and update the value of the label.
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 modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync 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
The IgbDatePicker can modify some of the calendar's settings via the properties that the Date Picker exposes. Some of these include VisibleMonths which allows more than one calendar to be displayed when the picker expands, WeekStart which determines the starting day of the week, ShowWeekNumbers which shows the number for each week in the year and more.
Internationalization
The localization of the IgbDatePicker can be controlled through its Locale input.
Here is how a IgbDatePicker with Japanese locale definition would look like:
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 modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync 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