ClassTelerikDatePicker<T>
Telerik Blazor DatePicker component for selecting single dates through an intuitive calendar interface. Provides both typed input and visual calendar selection with comprehensive date validation and formatting. Supports nullable DateTime, DateTime, and DateOnly value types with automatic culture-aware formatting. Features include disabled dates, min/max validation, adaptive mobile layouts, and extensive customization options. Integrates seamlessly with EditForm validation and supports both keyboard and mouse interaction patterns.
Definition
Namespace:Telerik.Blazor.Components
Assembly:Telerik.Blazor.dll
Type Parameters:
T
Syntax:
public class TelerikDatePicker<T> : TelerikPickerBase<T>, IComponent, IHandleEvent, IHandleAfterRender, IDisposableInheritance: objectComponentBaseBaseComponentTelerikInputBase<T>TelerikPickerBase<T>TelerikDatePicker<T>
Implements:
Inherited Members
Constructors
TelerikDatePicker()
Declaration
public TelerikDatePicker()Properties
AllowCaretMode
Controls whether a text input cursor (caret) is visible during date part editing when technically possible.
When true, users see a blinking cursor indicating current input position within date parts.
When false, the entire date part highlights during editing without showing cursor position.
Caret visibility depends on browser capabilities and input formatting - not all scenarios support caret display.
Useful for users who prefer precise cursor positioning when editing complex date formats.
Default value is false.
Declaration
[Parameter]
public bool AllowCaretMode { get; set; }Property Value
AutoCorrectParts
Controls whether the DatePicker automatically corrects invalid date part values during user input.
When true, typing "32" for day automatically corrects to the last valid day of the month.
When false, invalid values remain as typed until user manually corrects them.
Auto-correction applies to day overflow (32 becomes 30/31), month overflow (13 becomes 12), and similar cases.
Helps prevent user frustration by automatically handling common input mistakes during data entry.
Default value is true.
Declaration
[Parameter]
public bool AutoCorrectParts { get; set; }Property Value
AutoSwitchKeys
Defines which keyboard keys trigger automatic switching between date parts during input.
Works in combination with AutoSwitchParts to control when focus moves between day, month, and year fields.
Use special keys like slash ("/"), dash ("-"), or space (" ") to trigger immediate part switching.
Empty list uses default behavior based on the Format pattern and completed input length.
Example: AutoSwitchKeys="new List<object> { "/", "-", " " }" switches on common date separators.
AutoSwitchParts
Controls whether the input field automatically moves focus to the next date part after completing the current one.
When true, typing a complete month automatically focuses the day part, improving data entry speed.
When false, users must manually navigate between date parts using Tab or arrow keys.
Automatic switching works with Format patterns and respects AutoSwitchKeys configuration.
Particularly useful for high-volume data entry scenarios where typing efficiency matters.
Default value is true.
Declaration
[Parameter]
public bool AutoSwitchParts { get; set; }Property Value
BottomView
Sets the most detailed calendar view that users can navigate to within the DatePicker popup. Prevents users from drilling down below this view level, useful for restricting date selection granularity. Month allows selection of individual days within months (default behavior). Year limits selection to entire months, preventing day-level selection. Decade limits selection to entire years only. Use higher levels like Year when building month pickers or year selectors. Default value is Month.
Declaration
[Parameter]
public CalendarView BottomView { get; set; }Property Value
DisabledDates
Defines specific dates that users cannot select from the calendar popup.
Disabled dates appear grayed out and are not clickable, preventing user selection.
Use to block weekends, holidays, past dates, or any business-specific blackout periods.
Provide dates in any timezone - they will be compared using date-only values.
Example: Block all Sundays with DisabledDates="GetSundayDates()" or specific holidays.
Cannot be null - use empty list to allow all dates.
HeaderTemplate
Defines custom content displayed at the top of the DatePicker calendar popup. Use to add navigation controls, date range selectors, quick date buttons, or branded content. Header content appears above the calendar navigation and remains visible during view changes. Access calendar context through cascaded parameters if you need to interact with the calendar state. Content should be compact to preserve calendar usability and popup sizing. Children: Add custom HTML, buttons, or other Blazor components to enhance calendar functionality.
Declaration
[Parameter]
public RenderFragment HeaderTemplate { get; set; }Property Value
OnCalendarCellRender
Fires each time a calendar cell renders, allowing you to customize individual date cell appearance and styling. Use to add custom CSS classes, highlight special dates, mark deadlines, or show business-specific indicators. Access the date value and current view through DatePickerCalendarCellRenderEventArgs to apply conditional styling. Applied styles persist during view navigation and date selection until the calendar re-renders. Example: Add "holiday" class to weekend dates or "deadline" class to important business dates.
Declaration
[Parameter]
public Action<DatePickerCalendarCellRenderEventArgs> OnCalendarCellRender { get; set; }Property Value
OnClose
Fires just before the DatePicker calendar popup closes, allowing you to cancel the closing operation.
Use to validate selected date, prompt for confirmation, or prevent closing when required fields are incomplete.
Set IsCancelled to true to prevent the popup from closing.
Useful for implementing data validation workflows or keeping popup open until conditions are met.
Called when user clicks outside popup, presses Escape, or selects a date, but before popup hides.
Declaration
[Parameter]
public EventCallback<DatePickerCloseEventArgs> OnClose { get; set; }Property Value
OnOpen
Fires just before the DatePicker calendar popup opens, allowing you to cancel the opening operation.
Use to validate current state, check permissions, or prevent opening under specific conditions.
Set IsCancelled to true to prevent the popup from opening.
Useful for implementing conditional popup behavior or showing custom dialogs instead.
Called after user clicks the toggle button or presses Alt+Down, but before popup renders.
Declaration
[Parameter]
public EventCallback<DatePickerOpenEventArgs> OnOpen { get; set; }Property Value
PopupHeight
Controls the height of the calendar popup that opens below the DatePicker input field. Use CSS units like "300px", "20rem", or "50vh" to specify exact dimensions. Larger heights show more calendar content without scrolling, improving user experience. Smaller heights are useful in constrained layouts where vertical space is limited. Leave null for automatic height that adapts to calendar content and available screen space.
Declaration
[Parameter]
public string PopupHeight { get; set; }Property Value
PopupWidth
Controls the width of the calendar popup that opens below the DatePicker input field. Use CSS units like "400px", "25rem", "100%" for responsive layouts, or "fit-content" for dynamic sizing. "auto" automatically sizes the popup to fit the calendar content width (default behavior). Fixed pixel widths like "350px" provide consistent popup sizing across different screen sizes. Percentage widths like "100%" make the popup match the container width for responsive designs. Default value is "auto".
Declaration
[Parameter]
public string PopupWidth { get; set; }Property Value
ShowWeekNumbers
Controls whether the calendar popup displays week numbers in an additional column at the left side.
Week numbers follow ISO 8601 standard, showing the sequential week number within the year (1-53).
Useful for business applications that reference calendar weeks for planning, scheduling, or reporting.
Week numbers help users quickly identify specific weeks when coordinating across different calendar views.
Default value is false - week numbers are hidden to save space in standard date selection scenarios.
Declaration
[Parameter]
public bool ShowWeekNumbers { get; set; }Property Value
TwoDigitYearMax
Sets the cutoff year for interpreting two-digit year input as current century versus previous century. Years from 00 up to this value are interpreted as 20xx (current century). Years above this value up to 99 are interpreted as 19xx (previous century). For example, with default value 68: "25" becomes "2025", but "75" becomes "1975". Adjust based on your application's typical date ranges - use higher values for applications handling recent dates. Default value is 68, following common business practices for date interpretation.
Declaration
[Parameter]
public int TwoDigitYearMax { get; set; }Property Value
View
Controls which calendar view opens first when the DatePicker popup displays. Month shows individual days within a specific month for precise date selection. Year shows all 12 months for quick month-based navigation. Decade shows years within a decade for year-based selection. Century shows decades within a century for navigating across long time periods. Use Year or higher levels when users primarily select months or years rather than specific dates.
Declaration
[Parameter]
public CalendarView View { get; set; }Property Value
ViewChanged
Fires when the user navigates between different calendar views within the DatePicker popup. Triggered when users click month/year headers to zoom out to higher-level views or navigate back to detailed views. Use to track user navigation patterns, implement custom view restrictions, or synchronize with other calendar components. Provides the new CalendarView value that the user navigated to.
Declaration
[Parameter]
public EventCallback<CalendarView> ViewChanged { get; set; }Property Value
Width
Sets the width of the DatePicker input field and toggle button container. Use CSS units like "300px" for fixed widths, "100%" to fill available space, or "20rem" for scalable sizing. Fixed widths provide consistent appearance but may not work well in responsive layouts. Percentage or viewport units adapt to different screen sizes and container widths. Leave null to use browser default width based on content and styling.
Methods
BuildRenderTree(RenderTreeBuilder)
Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)Parameters
__builder
Overrides
NavigateTo(DateTime, CalendarView)
Programmatically navigates the calendar popup to display a specific date in the specified view. Use to highlight important dates, set initial calendar position, or respond to external date changes. Calendar will center the view around the target date and update the visible month/year/decade accordingly. Navigation occurs immediately if popup is open, or takes effect when popup opens if currently closed. Useful for implementing date shortcuts, synchronized calendars, or guided date selection workflows.