The Blazor DateTimePicker component provides a seamless interface for choosing both date and time in a single, unified control. It supports multiple display modes, customizable formats, validation rules, and accessibility features for precise date‑time input.

This sample demonstrates disabled dates functionality in the DateTimePicker component. All weekends (Saturday and Sunday) of a month are disabled and restricted from selection.

The Disabled Dates example shows how to disable specific dates in the DateTimePicker using the DayCellRendering event. This event triggers on each day cell element creation, allowing customization or disabling of specific dates. In this example, weekend dates are disabled using the DayCellRendering event by adding appropriate CSS classes to restrict selection.

This sample demonstrates how to highlight specific dates in the calendar popup of the DateTimePicker component with custom styling.

The Special Dates example shows how to customize specific dates using the DayCellRendering event. This event triggers on each day cell element creation, allowing custom styling and customization. In this example, weekend dates are disabled using the DayCellRendering event by adding appropriate CSS classes to restrict selection.

This sample demonstrates date and time range selection in the DateTimePicker component. Date and time selection is restricted within specific ranges defined by the Min, Max, MinTime, and MaxTime properties. All other dates and times are out of range and restricted.

In this example, the DateTimePicker range is restricted from 7th to 27th days of current month and the time is restriced from 10:00 AM to 7:00 PM.

The display format defines how the date and time value is shown (and parsed) in the DateTimePicker. By default, the DateTimePicker’s format is based on the current culture. You can also apply a custom or standard .NET date and time format by using the Format property.

The masking feature guides users to enter date and time values that match the display format defined by the Format property. Enable or disable masking using the EnableMask property. When enabled, the input shows a mask pattern derived from the configured format and the current culture (including localized separators and literals).

The DateTimePickerMaskPlaceholder directive allows custom placeholder text for each segment of the date and time format in a DateTimePicker. Use it together with EnableMask to provide clear guidance for expected input. Placeholders apply to the segments used by the configured format (for example, dd/MM/yyyy hh:mm:ss).

This sample demonstrates the list of events of the DateTimePicker component which will be triggered for appropriate DateTimePicker actions.

In addition to the Gregorian calendar, the DateTimePicker component supports the Islamic (Hijri) calendar. The Islamic calendar is a lunar calendar consisting of 12 months in a year of 354 or 355 days. Users can select a date from the Islamic calendar or manually enter a date. Additionally, helper methods such as ConvertToHijri and ConvertToGregorian can be used to convert dates between calendar systems.

The DateTimePicker retains its core features in Islamic mode, such as minimum and maximum date constraints, week numbers, first day of the week, right-to-left (RTL) support, start and depth views, localization, and the ability to highlight and customize specific dates. By default, the calendar mode is Gregorian. Enable Islamic mode by setting the CalendarMode property to CalendarType.Islamic. The selected value continues to be handled as a date/time value while the UI uses the Hijri calendar for display and navigation.

The StrictMode property controls how typed input is validated against the configured Min and Max range. When enabled, only valid date and time values within the specified range are accepted. If the entered value is invalid, the component retains the previous valid value. If the entered value is out of range, the component clamps the value to the nearest boundary (Min or Max).

The following example demonstrates the DateTimePicker in StrictMode with a Min/Max range of 5/5/2019 2:00 AM to 5/25/2019 2:00 AM. Only valid values within the range are accepted.

• If an out-of-range value such as 5/28/2019 is entered, the value is set to the Max value (5/25/2019 2:00 AM).
• If an invalid date is entered, the value remains at the previous valid value.

The following code demonstrates the DateTimePicker with StrictMode as true.

This sample demonstrates the week number and different week rules functionalities of the DateTimePicker component. Here, we have assigned FirstDay as the WeekRule for the DateTimePicker component.

The DateTimePicker provides the WeekNumber and WeekRule properties to specify the rule for defining the first week of the year with options: FirstDay, FirstFullWeek, and FirstFourDayWeek.