Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
Form Field Date Picker
A pre-composed form field that wraps a DatePicker control with automatic label, helper text, and error message display. Inherits from FormFieldBase, which provides EditContext integration, auto-generated control IDs, ARIA attribute wiring, and validation error state management.
Default
A basic
FormFieldDatePicker with a label, placeholder, and two-way binding via @bind-Value. The component automatically generates a unique ID to associate the label with the picker for accessibility.
Loading example…
With Date Constraints
Use
MinDate and MaxDate to restrict the selectable date range. Dates outside the range appear disabled in the calendar.
Loading example…
Manual Date Entry
Set
Editable to true to render the trigger as a text input with a calendar toggle, letting users type the date directly. InputFormats controls the accepted formats in priority order; ISO (yyyy-MM-dd) is always accepted. Both parameters are forwarded to the inner date picker, and typed text is parsed on blur or Enter.
Loading example…
With Disabled Dates
Use
DisabledDates to provide a function that determines which dates are disabled. In this example, weekends are not selectable.
Loading example…
With Error
Use
ErrorText to manually set a validation error. Click Validate to trigger the error when no date is selected.
Loading example…
Disabled
Set
Disabled to true to prevent user interaction. The picker trigger displays with reduced opacity.
Loading example…
EditForm Validation
Inside an
EditForm, validation errors from DataAnnotationsValidator display automatically. Try submitting without selecting the required dates.
Loading example…