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

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.


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