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

Example #

Entered date: 
<DateInput TValue="DateOnly?" @bind-Value="@enteredDate" />
<div class="mb-3">Entered date: @enteredDate</div>

@code {
    private DateOnly? enteredDate = null;
}

Enable max min #

DateOnly:
Min date: 6/16/2025
Max date: 7/16/2026
Entered date: 10/16/2025
<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);
    }
}
DateOnly?:
Min date: 6/16/2025
Max date: 7/16/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);
    }
}
DateTime:
Min date: 6/16/2025 5:46:44 PM
Max date: 7/16/2026 5:46:44 PM
Entered date: 10/16/2025 5:46:44 PM
<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;
    }
}
DateTime?:
Min date: 6/16/2025 5:46:44 PM
Max date: 7/16/2026 5:46:44 PM
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 #

<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 #

<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;
    private DateOnly? value5 = null;
    private DateOnly? value6 = null;
}

Styles #

<DateInput IsRounded="true" @bind-Value="@value1" />

@code {
    private DateOnly? value1 = null;
}

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 #

<DateInput Class="mb-2" @bind-Value="@value1" Disabled="true" />

@code {
    private DateOnly? value1 = null;
}

Validations #

@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 #

<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 #

Changed date: 7/16/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));
}
If you like BlazorExpress.Bulma, give it a star on GitHub!