Blazor DateTimePicker Example - Default Functionalities
This sample demonstrates the default functionality of the DateTimePicker component. The control provides a combined calendar and time‑picker popup for selecting or entering a complete datetime value. Today's date is highlighted in the popup calendar and receives initial focus when no date is selected, enabling quick selection of the current date. Select a date from the calendar and a time from the time picker; the selected date and time are displayed in the input.
The DateTimePicker supports both typed input and interactive selection. Users may type a datetime string or choose values from the popup; parsing and display follow the component's configured culture and format settings. Keyboard and mouse interactions are supported, and the popup preserves expected focus behavior to assist discoverability and accessibility. Provide an explicit label and placeholder so assistive technologies convey the control's purpose.
Implementation notes: bind the component value to a model property to capture the selected datetime and respond to changes. Configure display and parsing formats to match application culture and verify behavior for both typed input and popup selection to ensure consistent model updates. Optionally configure minimum and maximum values and time‑step granularity to restrict selection and improve input accuracy. Use the component's format tokens to present short or long datetime formats and to control time precision. When integrating into forms, ensure model validation handles null or invalid values and that error messages are accessible. Test the component across browsers, zoom levels, and device sizes so the popup adapts to viewport constraints.
See also: