BlazorUI Demo

Date and date range fields

Custom calendar selection, typed entry, optional time and travel-style ranges.

Date and time
View code 
<EditForm Model="model" FormName="date-fields">
    <BuiDateField TValue="DateTime?" @bind-Value="model.Date" Label="Appointment" IncludeTime MinuteStep="15" InputFormat="dd/MM/yyyy" />
</EditForm>

@code {
    private DateModel model = new();
    private sealed class DateModel { public DateTime? Date { get; set; } }
}
One or two month range
–
View code 
<BuiDateRangeField @bind-Value="range" Label="Travel dates" View="DateRangeView.TwoMonths" Min="DateTime.Today" />
<BuiText Typo="Typo.Caption">@range.Start?.ToString("d") – @range.End?.ToString("d")</BuiText>

@code {
    private DateRange range;
}