Date Picker is an interactive component that allows users to select a date (and optionally time) from a visual calendar interface. It simplifies the process of choosing dates, improves accuracy, and ensures consistency in formatting.
Basic FodDatePicker with Label, Placeholder, and two-way binding.
Basic DatePicker
With pre-selected value
With helper text
<FodDatePicker Label="Select date"
Placeholder="Choose a date"
@bind-Value="_selectedDate" />
<FodDatePicker Label="Birth date"
@bind-Value="_birthDate" />Basic mode shows simple month/year header. Advanced mode provides month and year dropdown buttons for quick navigation.
Basic (default)
Advanced
<FodDatePicker Label="Date"
PickerType="DatePickerType.Basic"
@bind-Value="_date" />
<FodDatePicker Label="Date"
PickerType="DatePickerType.Advanced"
@bind-Value="_date" />Select a date range with visual selection highlighting in the calendar.
Basic date range
Advanced date range
<FodDateRangePicker Label="Select date range"
@bind-StartDate="_startDate"
@bind-EndDate="_endDate" />
<FodDateRangePicker Label="Vacation dates"
PickerType="DatePickerType.Advanced"
@bind-StartDate="_startDate"
@bind-EndDate="_endDate" />Restrict date selection with min/max dates, disabled days of week, or custom disabled dates function.
Min/Max dates (next 30 days)
Disabled weekends
Custom disabled dates
<FodDatePicker Label="Appointment"
MinDate="DateTime.Today"
MaxDate="DateTime.Today.AddDays(30)"
@bind-Value="_date" />
<FodDatePicker Label="Business date"
DisabledDaysOfWeek="@(new[] { DayOfWeek.Saturday, DayOfWeek.Sunday })"
@bind-Value="_date" />
<FodDatePicker Label="Available date"
DisabledDates="@IsHoliday"
@bind-Value="_date" />
@code {
private bool IsHoliday(DateTime date) =>
(date.Month == 1 && date.Day == 1) ||
(date.Month == 12 && date.Day == 25);
}FodDatePicker supports default, disabled, readonly, and error states.
Default
Disabled
ReadOnly
Required with error
<FodDatePicker Label="Date" Disabled="true" />
<FodDatePicker Label="Date" ReadOnly="true" />
<FodDatePicker Label="Date" Required="true" ErrorText="Required" />FodDatePicker integrates with FodForm for validation. Supports Required validation, custom validation functions, and Data Annotations.
FodForm integration with validation
<FodForm Model="@_formModel"
ValidationMode="ValidationMode.OnBlur"
ShowValidationSummary="true"
OnValidSubmit="HandleFormSubmit">
<ChildContent>
<DataAnnotationsValidator />
<FodDatePicker Label="Event date"
Required="true"
For="@(() => _formModel.EventDate)"
MinDate="DateTime.Today"
@bind-Value="_formModel.EventDate" />
<FodDatePicker Label="Deadline"
Required="true"
For="@(() => _formModel.Deadline)"
MaxDate="@_formModel.EventDate"
@bind-Value="_formModel.Deadline" />
</ChildContent>
<Actions>
<FodButton HtmlType="submit" Type="FodColor.Primary">Submit</FodButton>
</Actions>
</FodForm>
@code {
private class EventFormModel
{
[Required(ErrorMessage = "Event date is required")]
public DateTime? EventDate { get; set; }
[Required(ErrorMessage = "Deadline is required")]
public DateTime? Deadline { get; set; }
}
}Customize date format and culture for international applications.
Romanian (ro-RO)
Russian (ru-RU)
Custom format (yyyy-MM-dd)
Week starts on Monday
<FodDatePicker Label="Data"
Culture="@(new CultureInfo("ro-RO"))"
TodayButtonText="Astazi"
@bind-Value="_date" />
<FodDatePicker Label="Date"
Format="yyyy-MM-dd"
@bind-Value="_date" />
<FodDatePicker Label="Date"
FirstDayOfWeek="DayOfWeek.Monday"
@bind-Value="_date" />Customize calendar behavior and footer buttons.
With footer buttons
Only Today button
Not clearable
Don't close on select
<FodDatePicker Label="Date"
ShowTodayButton="true"
ShowClearButton="true"
@bind-Value="_date" />
<FodDatePicker Label="Date"
Clearable="false"
@bind-Value="_date" />
<FodDatePicker Label="Date"
CloseOnSelect="false"
@bind-Value="_date" />DatePicker can expand to fill its container width.
<FodDatePicker Label="Full width" FullWidth="true" />FodDatePicker follows WCAG AA accessibility guidelines with full keyboard support.
<FodDatePicker Label="Accessible date picker"
@bind-Value="_date" />FodDatePicker component properties and their descriptions.