DateInput

The 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

API Documentation

How it works #

The DateInput component provides a user-friendly way to select or enter dates using a text box or a date picker interface. It supports two-way binding and works seamlessly with DateOnly? and other date types.

How to use:
  1. Add the DateInput component to your page.
  2. Bind its Value property to a DateOnly? field using @bind-Value.
  3. Read or update the bound value in your code as needed.
This demo shows the basic usage of DateInput with two-way binding, allowing users to select a date and see the value reflected in the UI.
Entered date: 
<DateInput TValue="DateOnly?" @bind-Value="@enteredDate" />
<div class="mb-3">Entered date: @enteredDate</div>

@code {
    private DateOnly? enteredDate = null;
}

Enable max min #

The DateInput component supports restricting selectable dates using minimum and maximum values. This is useful for scenarios where only a specific date range is valid.

How to use:
  1. Set EnableMaxMin="true" on the DateInput component.
  2. Provide Min and Max values to define the allowed date range.
  3. Bind the Value property to a DateOnly field.
This demo shows how to restrict date selection to a specific range using DateOnly values.
DateOnly:
Min date: 9/30/2025
Max date: 10/30/2026
Entered date: 1/30/2026
<div class="mb-3">
    <strong>DateOnly</strong>:
</div>
<div class="mb-3">
    <DateInput TValue="DateOnly" @bind-Value="@date1" EnableMaxMin="true" Min="@min1" Max="@max1" Placeholder="Enter Date" />
</div>
<div class="mb-3">Min date: @min1</div>
<div class="mb-3">Max date: @max1</div>
<div class="mb-3">Entered date: @date1</div>

@code {
    private DateTime date = DateTime.Now.AddMonths(3);
    private DateTime min = DateTime.Now.AddMonths(-1);
    private DateTime max = DateTime.Now.AddYears(1);

    private DateOnly date1, min1, max1;

    protected override void OnInitialized()
    {
        date1 = DateOnly.FromDateTime(date);
        min1 = DateOnly.FromDateTime(min);
        max1 = DateOnly.FromDateTime(max);
    }
}
You can also use nullable DateOnly? types with min and max restrictions. This allows the field to be empty while still enforcing the allowed date range when a value is entered.

How to use:
  1. Set EnableMaxMin="true" on the DateInput component.
  2. Provide Min and Max values as DateOnly?.
  3. Bind the Value property to a DateOnly? field.
This demo demonstrates nullable date support with min and max constraints.
DateOnly?:
Min date: 9/30/2025
Max date: 10/30/2026
Entered date: 
<div class="mb-3">
    <strong>DateOnly?</strong>:
</div>
<div class="mb-3">
    <DateInput TValue="DateOnly?" @bind-Value="@date2" EnableMaxMin="true" Min="@min2" Max="@max2" Placeholder="Enter Date" />
</div>
<div class="mb-3">Min date: @min2</div>
<div class="mb-3">Max date: @max2</div>
<div class="mb-3">Entered date: @date2</div>

@code {
    private DateTime date = DateTime.Now.AddMonths(3);
    private DateTime min = DateTime.Now.AddMonths(-1);
    private DateTime max = DateTime.Now.AddYears(1);

    private DateOnly? date2, min2, max2;

    protected override void OnInitialized()
    {
        date2 = null;
        min2 = DateOnly.FromDateTime(min);
        max2 = DateOnly.FromDateTime(max);
    }
}
The DateInput component also works with DateTime types for min and max validation. This is useful when you need to work with both date and time information.

How to use:
  1. Set EnableMaxMin="true" on the DateInput component.
  2. Provide Min and Max values as DateTime.
  3. Bind the Value property to a DateTime field.
This demo shows how to use DateInput with DateTime values and range validation.
DateTime:
Min date: 9/30/2025 2:15:48 AM
Max date: 10/30/2026 2:15:48 AM
Entered date: 1/30/2026 2:15:48 AM
<div class="mb-3">
    <strong>DateTime</strong>:
</div>
<div class="mb-3">
    <DateInput TValue="DateTime" @bind-Value="@date3" EnableMaxMin="true" Min="@min3" Max="@max3" Placeholder="Enter Date" />
</div>
<div class="mb-3">Min date: @min3</div>
<div class="mb-3">Max date: @max3</div>
<div class="mb-3">Entered date: @date3</div>

@code {
    private DateTime date = DateTime.Now.AddMonths(3);
    private DateTime min = DateTime.Now.AddMonths(-1);
    private DateTime max = DateTime.Now.AddYears(1);

    private DateTime date3, min3, max3;

    protected override void OnInitialized()
    {
        date3 = DateTime.Now.AddMonths(3);
        min3 = min;
        max3 = max;
    }
}
Nullable DateTime? is also supported for scenarios where the date field can be empty but still needs to respect min and max constraints.

How to use:
  1. Set EnableMaxMin="true" on the DateInput component.
  2. Provide Min and Max values as DateTime?.
  3. Bind the Value property to a DateTime? field.
This demo demonstrates nullable DateTime? support with min and max validation.
DateTime?:
Min date: 9/30/2025 2:15:48 AM
Max date: 10/30/2026 2:15:48 AM
Entered date: 
<div class="mb-3">
    <strong>DateTime?</strong>:
</div>
<div class="mb-3">
    <DateInput TValue="DateTime?" @bind-Value="@date4" EnableMaxMin="true" Min="@min4" Max="@max4" Placeholder="Enter Date" />
</div>
<div class="mb-3">Min date: @min4</div>
<div class="mb-3">Max date: @max4</div>
<div class="mb-3">Entered date: @date4</div>

@code {
    private DateTime date = DateTime.Now.AddMonths(3);
    private DateTime min = DateTime.Now.AddMonths(-1);
    private DateTime max = DateTime.Now.AddYears(1);

    private DateTime? date4, min4, max4;

    protected override void OnInitialized()
    {
        date4 = null;
        min4 = min;
        max4 = max;
    }
}

Colors #

The DateInput component supports multiple color themes to match your application's style. You can set the Color property to apply different visual states such as primary, info, success, warning, or danger.

How to use:
  1. Add the DateInput component to your page.
  2. Set the Color property to one of the available TextInputColor values (e.g., Primary, Success).
  3. Bind the Value property as usual.
This demo shows how to apply different color styles to the DateInput component. 
<DateInput Class="mb-2" Color="TextInputColor.Link" @bind-Value="@value1" />
<DateInput Class="mb-2" Color="TextInputColor.Primary" @bind-Value="@value2" />
<DateInput Class="mb-2" Color="TextInputColor.Info" @bind-Value="@value3" />
<DateInput Class="mb-2" Color="TextInputColor.Success" @bind-Value="@value4" />
<DateInput Class="mb-2" Color="TextInputColor.Warning" @bind-Value="@value5" />
<DateInput Class="mb-2" Color="TextInputColor.Danger" @bind-Value="@value6" />

@code {
    private DateOnly? value1 = null;
    private DateOnly? value2 = null;
    private DateOnly? value3 = null;
    private DateOnly? value4 = null;
    private DateOnly? value5 = null;
    private DateOnly? value6 = null;
}

Sizes #

The DateInput component can be rendered in different sizes to fit various UI requirements. Use the Size property to select from small, normal, medium, or large input fields.

How to use:
  1. Add the DateInput component to your page.
  2. Set the Size property to DateInputSize.Small, Normal, Medium, or Large.
  3. Bind the Value property as needed.
This demo demonstrates the available size options for the DateInput component. 
<DateInput Class="mb-2" Size="DateInputSize.Small" @bind-Value="@value1" />
<DateInput Class="mb-2" Size="DateInputSize.Normal" @bind-Value="@value2" />
<DateInput Class="mb-2" Size="DateInputSize.Medium" @bind-Value="@value3" />
<DateInput Class="mb-2" Size="DateInputSize.Large" @bind-Value="@value4" />

@code {
    private DateOnly? value1 = null;
    private DateOnly? value2 = null;
    private DateOnly? value3 = null;
    private DateOnly? value4 = null;
}

Styles #

The DateInput component supports additional styling options, such as rounded corners. Use the IsRounded property to enable a rounded appearance.

How to use:
  1. Add the DateInput component to your page.
  2. Set IsRounded="true" to apply rounded styling.
  3. Bind the Value property as needed.
This demo shows how to enable rounded styling for the DateInput component. 
<DateInput IsRounded="true" @bind-Value="@value1" />

@code {
    private DateOnly? value1 = null;
}

States #

The DateInput component can visually reflect different states such as hovered, focused, or loading. Use the State property to control the visual state of the input.

How to use:
  1. Add the DateInput component to your page.
  2. Set the State property to TextInputState.Hovered, Focused, or Loading as needed.
  3. Bind the Value property as usual.
This demo demonstrates how to display the DateInput in different visual states. 
<DateInput Class="mb-2" @bind-Value="@value1" />
<DateInput Class="mb-2" State="TextInputState.Hovered" @bind-Value="@value2" />
<DateInput Class="mb-2" State="TextInputState.Focused" @bind-Value="@value3" />
<DateInput Class="mb-2" State="TextInputState.Loading" @bind-Value="@value4" />

@code {
    private DateOnly? value1 = null;
    private DateOnly? value2 = null;
    private DateOnly? value3 = null;
    private DateOnly? value4 = null;
}

Disabled #

The DateInput component can be disabled to prevent user interaction. Set the Disabled property to true to make the input read-only.

How to use:
  1. Add the DateInput component to your page.
  2. Set Disabled="true" to disable the input.
  3. Bind the Value property as needed.
This demo shows how to render a disabled DateInput field. 
<DateInput Class="mb-2" @bind-Value="@value1" Disabled="true" />

@code {
    private DateOnly? value1 = null;
}

Validations #

The DateInput component integrates with Blazor's form validation system. Use it inside an EditForm with data annotations to provide required field validation and display error messages.

How to use:
  1. Place the DateInput inside an EditForm component.
  2. Bind the Value property to a model property decorated with validation attributes (e.g., [Required]).
  3. Add DataAnnotationsValidator and ValidationMessage components for validation support and error display.
  4. Handle form submission and reset as needed.
This demo demonstrates how to use DateInput with form validation and error messages. 
@using System.ComponentModel.DataAnnotations
@using Microsoft.AspNetCore.Components.Forms

<style>
    /* validations */
    .valid.modified:not([type=checkbox]) {
        border-color: hsl(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l)) !important;
        outline: 1px solid hsl(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l)) !important;
    }

    .invalid {
        border-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l)) !important;
        outline: 1px solid hsl(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l)) !important;
    }

    .validation-message {
        color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l)) !important;
    }
</style>

<EditForm EditContext="@editContext" OnValidSubmit="HandleOnValidSubmit">
    <DataAnnotationsValidator />

    <div class="form-group row mb-3">
        <label class="col-md-2 col-form-label">Invoice Date: <span class="text-danger">*</span></label>
        <div class="col-md-10">
            <DateInput TValue="DateOnly?" @bind-Value="invoice.InvoiceDate" />
            <ValidationMessage For="@(() => invoice.InvoiceDate)" />
        </div>
    </div>

    <div class="form-group row mb-3">
        <label class="col-md-2 col-form-label">Customer Name: <span class="text-danger">*</span></label>
        <div class="col-md-10">
            <TextInput BindEvent="BindEvent.OnInput" @bind-Value="invoice.CustomerName" Placeholder="Enter Customer Name" />
            <ValidationMessage For="@(() => invoice.CustomerName)" />
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 text-right">
            <Button Type="ButtonType.Button" Color="ButtonColor.Light" Size="ButtonSize.Small" Class="float-end" @onclick="ResetForm">Reset</Button>
            <Button Type="ButtonType.Submit" Color="ButtonColor.Success" Size="ButtonSize.Small" Class="float-end me-2">Submit</Button>
        </div>
    </div>

</EditForm>

@code {
    private Invoice invoice = new();
    private EditContext? editContext;

    protected override void OnInitialized()
    {
        editContext = new EditContext(invoice);
        base.OnInitialized();
    }

    public void HandleOnValidSubmit()
    {
        // additional check
        if (editContext.Validate())
        {
            // do something
            // submit the form

            Console.WriteLine($"Invoice Date: {invoice.InvoiceDate}");
            Console.WriteLine($"Customer Name: {invoice.CustomerName}");
        }
    }

    private void ResetForm()
    {
        invoice = new();
        editContext = new EditContext(invoice);
    }

    public class Invoice
    {
        [Required(ErrorMessage = "Invoice Date required.")]
        public DateOnly? InvoiceDate { get; set; }

        [Required(ErrorMessage = "Customer Name required.")]
        public string? CustomerName { get; set; }
    }
}

Alignment #

The DateInput component supports text alignment customization. Use the TextAlignment property to align the input text to the left, center, or right.

How to use:
  1. Add the DateInput component to your page.
  2. Set the TextAlignment property to TextAlignment.Left, Center, or Right as needed.
  3. Bind the Value property as usual.
This demo shows how to control the text alignment within the DateInput field. 
<DateInput Class="mb-2" @bind-Value="@enteredText1" />
<DateInput Class="mb-2" @bind-Value="@enteredText2" TextAlignment="TextAlignment.Left" />
<DateInput Class="mb-2" @bind-Value="@enteredText3" TextAlignment="TextAlignment.Center" />
<DateInput Class="mb-2" @bind-Value="@enteredText4" TextAlignment="TextAlignment.Right" />

@code {
    private DateOnly? enteredText1 = new DateOnly(2025, 02, 25);
    private DateOnly? enteredText2 = new DateOnly(2025, 02, 26);
    private DateOnly? enteredText3 = new DateOnly(2025, 02, 27);
    private DateOnly? enteredText4 = new DateOnly(2025, 02, 28);
}

Events: ValueChanged #

The DateInput component exposes a ValueChanged event that is triggered whenever the user selects or enters a new date. This allows you to react to changes and update your application state accordingly.

How to use:
  1. Add the DateInput component to your page.
  2. Set the ValueChanged parameter to a callback method that handles the new value.
  3. Optionally, use a button or other UI to programmatically change the date and observe the event behavior.
This demo demonstrates how to handle the ValueChanged event and update the UI when the date changes.
Changed date: 10/30/2025
<DateInput TValue="DateOnly" Value="date1" ValueExpression="() => date1" ValueChanged="(value) => DateChanged(value)" />

<div class="mb-3">Changed date: @date1</div>

<Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="ChangeDate"> Change Date </Button>

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

    private void DateChanged(DateOnly dateOnly)
    {
        date1 = dateOnly;
    }

    private void ChangeDate() => date1 = DateOnly.FromDateTime(DateTime.Now.AddDays(3));
}
DO YOU KNOW?
This demo website is built using the BlazorExpress.Bulma library and published on the Azure Web App. See our source code on GitHub.
If you like BlazorExpress.Bulma, give it a star on GitHub!