Date Picker

The default DatePicker displays a trigger button with a calendar icon and the selected date rendered using the culture's short date format (the default DateFormat is d). Bind to a DateTime? with @bind-Value for two-way data binding. Clicking the button opens a calendar popover for date selection.

Use the DateFormat parameter to control how the selected date appears on the trigger button. This example uses dd/MM/yyyy for a European-style format. Any valid .NET date format string is supported, including yyyy-MM-dd for ISO format.

Set Placeholder to show custom placeholder text when no date is selected. The placeholder renders in muted foreground to differentiate it from an actual selection, guiding the user on what type of date to choose.

Set Editable to true to render the trigger as a text input with a calendar toggle button, letting users type the date directly. Typed text is parsed on blur or Enter against InputFormats (falling back to DateFormat when unset), and ISO format (yyyy-MM-dd) is always accepted. Text that cannot be parsed — or that resolves to a date excluded by MinDate, MaxDate, or DisabledDates — reverts to the current value. When the calendar is open, committing a typed date brings its month into view.

Use DayTemplate to render custom content inside each calendar day button. The template receives a CalendarDayContext exposing Date, IsSelected, IsDisabled, IsOutsideMonth, and IsToday. This example marks days with available delivery slots with a dot below the day number; use DayClassFunc when you only need per-day CSS classes.

Use MinDate and MaxDate to restrict selection to a specific date window. Dates outside the range are automatically disabled in the calendar. This is useful for booking systems where only future dates or a specific period should be selectable.

Use the DisabledDates function to programmatically disable specific dates. This example disables weekends, making it suitable for business date selection where only weekdays are valid choices.

Use the Class parameter to apply custom Tailwind CSS classes to the trigger button. This example demonstrates a wider trigger with a gradient background and custom border, useful for hero sections or prominent date selection fields.

Set Disabled to true to prevent user interaction. The picker appears with reduced opacity and the popover does not open on click, making it suitable for read-only date displays or locked form fields.

A real-world composition showing the DatePicker within a form layout alongside other inputs. The date picker is wrapped in a Field with a label and description, demonstrating how it integrates with the form field system for accessible, well-structured forms.