Default Theme

DatePicker

Overview

Picking a date can be tough without context. A date picker (DatePicker) offers a drop-down control that’s optimized for picking a single date from a calendar view where contextual information like the day of the week or fullness of the calendar is important. You can modify the calendar to provide additional context or to limit available dates.

Usage

Basic DatePicker

Selected date:

<Dropdown ItemsSource=@DaysOfWeek.Select(x=>new DropdownOption {Key=x.ToString(), Text=System.Globalization.DateTimeFormatInfo.CurrentInfo.GetDayName(x) })
          Style="max-width:300px; margin:0 0 15px 0;"
          Placeholder="Select an option"
          @bind-SelectedOption=@selectedDayOfWeekOption
          Label="Select the first day of the week" />
<DatePicker AllowTextInput="false"
            Style="max-width:300px; margin:0 0 15px 0;"
            @bind-Value="selectedDate1"
            Placeholder="Select a date..."
            FirstDayOfWeek=@((DayOfWeek)Enum.Parse(typeof(DayOfWeek), selectedDayOfWeekOption?.Key!)) />
Selected date: @selectedDate1

DatePicker Required

Selected date:

<DatePicker AllowTextInput="false"
            Style="max-width:300px; margin:0 0 15px 0;"
            Underlined="true"
            IsRequired="true"
            @bind-Value="selectedDate2"
            Placeholder="Select a date..." />
<br />Selected date: @selectedDate2

DatePicker Disabled

Disabled (with Label)

Selected date:

<DatePicker AllowTextInput="false"
            Style="max-width:300px; margin:0 0 15px 0;"
            Disabled="true"
            @bind-Value="selectedDate2"
            Placeholder="Select a date..." />
<DatePicker AllowTextInput="false"
            Style="max-width:300px; margin:0 0 15px 0;"
            Disabled="true"
            Label="Disabled (with Label)"
            @bind-Value="selectedDate2"
            Placeholder="Select a date..." />
<br />Selected date: @selectedDate2

DatePicker allows input date string

Text input is parsed using .NET's (mono's) DateTime.TryParse method. It is region-aware so should be able to identify many date string inputs. String input is intended to be accomplished through keyboard navigation as mouse-clicking will open the picker.

DatePicker with string date input

Selected date:

Selected date: @(calendar4Value != null ? ((DateTime)calendar4Value).ToString("D") : "-")
<br />
<Calendar @bind-Value="calendar4Value" HighlightSelectedMonth="true" ShowWeekNumbers="true" />

DatePicker with Blazor Forms Validation

Selected date:@(calendar4Value != null ? ((DateTime)calendar4Value).ToString("D") : "-")
<br />
<Calendar @bind-Value="calendar4Value" HighlightSelectedMonth="true" ShowSixWeeksByDefault="true" />

DatePicker with TimePicker

Selected date:

<DatePicker AllowTextInput="false"
            Style="max-width:300px; margin:0 0 15px 0;"
            IsMonthPickerVisible="false"
            IsTimePickerVisible="true"
            @bind-Value="selectedDate4"
            Placeholder="Select a date..."
             />

<DefaultButton Text="Set date to null" @onclick=@(args => selectedDate4 = null) />
<br />Selected date: @selectedDate4