Blazor Date Input

The Blazor Bootstrap DateInput component is constructed using an HTML input of type="date" which limits user input based on pre-defined parameters. This component enables users to input a date using a text box with validation or a special date picker interface.

Basic usage#

NOTE
The input UI generally varies from browser to browser. In unsupported browsers, the control degrades gracefully to type="text".

Generic type#

The Blazor Bootstrap DateInput component supports several data types: DateOnly, DateOnly?, DateTime, and DateTime?. This allows flexible component usage to accommodate various data types in Blazor applications.

In the below example, TValue is set to DateOnly, DateOnly?, DateTime, and DateTime?.

Enable max min#

Set EnableMinMax="true" and set the Max and Min parameters to restrict the user input between the Min and Max range.
NOTE
If the user tries to enter a number in the DateInput field which is out of range, then it will override with Max or Min value based on the context. If the user input exceeds the Max value, it will override with the Max value. If the user input is less than the Min value, then it will override with the Min value.

Disable#

Use the Disabled parameter to disable the DateInput.
Entered date: 6/16/2024
razor
<div class="mb-3">
    <DateInput TValue="DateOnly"
               @bind-Value="@date1"
               Disabled="@disabled"
               Placeholder="Enter Date" />
</div>
<div class="mb-3">Entered date: @date1</div>

<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Warning" @onclick="Toggle"> Toggle </Button>

@code {
    private DateOnly date1 = DateOnly.FromDateTime(DateTime.Now);
    private bool disabled = true;

    private void Enable() => disabled = false;

    private void Disable() => disabled = true;

    private void Toggle() => disabled = !disabled;
}
Also, use Enable() and Disable() methods to enable and disable the DateInput.
NOTE
Do not use both the Disabled parameter and Enable() & Disable() methods.
Entered date: 6/16/2024
razor
<div class="mb-3">
    <DateInput @ref="dateInput"
               TValue="DateOnly"
               @bind-Value="@date1"
               Placeholder="Enter Date" />
</div>
<div class="mb-3">Entered date: @date1</div>

<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>

@code {
    private DateInput<DateOnly> dateInput = default!;

    private DateOnly date1 = DateOnly.FromDateTime(DateTime.Now);

    private void Disable() => dateInput.Disable();

    private void Enable() => dateInput.Enable();
}

Validations#

Like any other blazor input component, DateInput component supports validations. Use the DataAnnotations to validate the user input before submitting the form. In the below example, we used the Required attributes.

Events: ValueChanged#

This event fires on every user keystroke/selection that changes the DateInput value.

Restrict the date field based on the entry in another date field#

One common scenario is that the date fields are restricted based on the entry in another date field. In the example below, we restrict the course end time based on the selection of course start date.