Class

TelerikPickerBase<T>

Declaration

protected TelerikPickerBase()

Controls how the component adapts its interface and behavior based on the user's device and screen size. None always uses desktop mode with standard dropdown popups regardless of device. Auto automatically detects device type and viewport size to choose optimal layout. Auto mode uses bottom sheet overlays on touch devices and smaller screens for improved mobile experience. Desktop mode uses traditional dropdown popups positioned below the input field. Use Auto for responsive applications that need to work well across all devices. Default value is None.

Declaration

[Parameter]
public AdaptiveMode AdaptiveMode { get; set; }

Property Value

Controls browser autocomplete behavior for the date input field. "off" disables all browser autocomplete suggestions (default value for better UX with formatted date inputs). "on" enables browser to suggest previously entered dates and autocompletion. "bday" specifically suggests birthday dates for forms collecting birth information. Use "off" when date format conflicts with browser suggestions or when implementing custom date assistance. Default value is "off".

Declaration

[Parameter]
public string AutoComplete { get; set; }

Property Value

Defines additional child components or content to be rendered within the picker container. Use to add custom buttons, validation messages, help text, or supplementary UI elements. Child content renders alongside the main input field and popup trigger elements. Access parent component context through cascading parameters if needed for advanced integration. Children: Add any Blazor components, HTML elements, or custom content to extend picker functionality.

Declaration

[Parameter]
public RenderFragment ChildContent { get; set; }

Property Value

Sets the delay in milliseconds between user typing and triggering value change events and validation. Higher values (200-500ms) reduce server requests and validation calls during rapid typing. Lower values (50-150ms) provide more responsive feedback but may impact performance. Debouncing prevents excessive API calls and validation while user is actively typing. Use longer delays for expensive operations like server validation or database lookups. Default value is 150ms - balances responsiveness with performance.

Declaration

[Parameter]
public int DebounceDelay { get; set; }

Property Value

Controls the visual fill style of the picker input field and toggle button. "solid" creates a filled background appearance with high contrast (default value). "outline" uses border-only styling with transparent background for subtle integration. "flat" removes borders and background for minimal visual impact. Fill mode affects the picker's visual prominence and should match your application's design language. Use "outline" for clean, modern interfaces or "solid" for traditional form elements. Default value is "solid".

Declaration

[Parameter]
public string FillMode { get; set; }

Property Value

Controls the date format pattern displayed in the input field and used for parsing user input. Use standard .NET date format strings like "MM/dd/yyyy" for US dates or "dd.MM.yyyy" for European format. "yyyy-MM-dd" creates ISO format, "MMM dd, yyyy" shows month names like "Jan 15, 2024". Format affects both display appearance and input validation behavior. Must be compatible with the component's date parsing logic and Min/Max validation. Default format varies by component type - DatePicker uses culture-specific short date pattern.

Declaration

[Parameter]
public virtual string Format { get; set; }

Property Value

Sets the latest selectable date to restrict user input and calendar navigation. Users cannot select, type, or navigate to dates after this maximum value. Calendar popup disables later dates and prevents navigation to future time periods. Use for enforcing business rules like "no future dates" or "project must end before deadline". Must be later than or equal to Min - component validates this relationship. Default value is December 31, 2099 to allow future planning in most business applications.

Declaration

[Parameter]
public DateTime Max { get; set; }

Property Value

Sets the earliest selectable date to restrict user input and calendar navigation. Users cannot select, type, or navigate to dates before this minimum value. Calendar popup disables earlier dates and prevents navigation to previous time periods. Use for enforcing business rules like "no past dates" or "earliest start date is project begin". Must be earlier than or equal to Max - component validates this relationship. Default value is January 1, 1900 to allow historical dates in most business scenarios.

Declaration

[Parameter]
public DateTime Min { get; set; }

Property Value

Sets the placeholder text displayed in the input field when no date is selected. Use descriptive text like "Select date", "Choose deadline", or "Pick start date" to guide users. Placeholder disappears when user starts typing or when a value is selected. Essential for accessibility and user experience - helps users understand the expected input format. Works together with Format to show users the expected date pattern.

Declaration

[Parameter]
public string Placeholder { get; set; }

Property Value

Applies custom CSS classes to the calendar popup container for advanced styling and theming. Use to override default popup appearance, add custom borders, shadows, or positioning adjustments. Classes are applied to the popup wrapper element, not individual calendar cells. Combine with component CSS variables for comprehensive theme customization. Example: "custom-popup-theme dark-calendar" for multi-class styling approaches.

Declaration

[Parameter]
public string PopupClass { get; set; }

Property Value

Controls whether the input field accepts direct text entry or only allows date selection through the calendar popup. When true, users can only interact with the calendar popup - typing in the input field is disabled. When false, users can both type dates directly and use the calendar popup for selection. Read-only mode prevents accidental date changes while still allowing calendar browsing for reference. Useful for display-only scenarios or when date changes must go through specific validation workflows.

Declaration

[Parameter]
public bool ReadOnly { get; set; }

Property Value

Controls the corner rounding style of the picker input field and buttons. "small" creates subtle rounded corners for a modern, soft appearance. "medium" uses moderate rounding that balances modern and traditional styles (default value). "large" creates highly rounded corners for a very modern, pill-like appearance. "full" makes completely rounded ends for a circular or pill button effect. Choose based on your application's design system and visual consistency requirements. Default value is "medium".

Declaration

[Parameter]
public string Rounded { get; set; }

Property Value

Controls whether a clear button (X icon) appears inside the input field for quick date removal. When true, users can click the clear button to set the value to null and close the popup. When false, users must manually delete the date or select a new one to change the value. Clear button appears only when the component has a value - empty fields don't show the clear button. Particularly useful for optional date fields where users need to easily remove selected dates.

Declaration

[Parameter]
public bool ShowClearButton { get; set; }

Property Value

Controls whether the calendar shows days from adjacent months in a grayed-out style. When true, displays previous/next month days to fill the calendar grid completely. When false, shows only the current month's days with empty cells for adjacent month days. Adjacent month days are not selectable but provide visual context for week boundaries and month transitions. Useful for users who prefer clean month views without visual clutter from neighboring months. Default value is true.

Declaration

[Parameter]
public bool ShowOtherMonthDays { get; set; }

Property Value

Controls the overall size and spacing of the picker input field, buttons, and popup elements. "small" creates compact controls suitable for dense layouts or mobile interfaces. "medium" uses standard sizing that works well in most business applications (default value). "large" creates spacious controls with increased padding for accessibility and touch-friendly interfaces. Size affects input height, button dimensions, font size, and internal spacing. Choose based on your target devices and user interface density requirements. Default value is "medium".

Declaration

[Parameter]
public string Size { get; set; }

Property Value

Sets the subtitle text displayed below the title in the mobile popup header when adaptive mode is active. Only visible when Auto is set and component renders in mobile view. Use for additional context like "for meeting appointment", "project deadline", or current selection status. Subtitle provides secondary information without cluttering the main title. Useful for showing current state, validation hints, or contextual guidance in mobile interfaces.

Declaration

[Parameter]
public string Subtitle { get; set; }

Property Value

Sets the title text displayed in the header of the mobile popup when adaptive mode is active. Only visible when Auto is set and component renders in mobile view. Use descriptive titles like "Select Date", "Choose Appointment Time", or "Pick Deadline" for clarity. Title appears at the top of the full-screen mobile picker interface. Helps users understand the picker's purpose in mobile environments where context may be less clear.

Declaration

[Parameter]
public string Title { get; set; }

Property Value

Programmatically closes the calendar popup and returns focus to the input field. Use to implement custom close triggers, validation workflows, or automated popup closing after specific actions. Closing occurs asynchronously with smooth animations if popup is currently open. Does nothing if popup is already closed - safe to call multiple times without side effects. Useful for closing popup after external date selection or when implementing custom selection logic.

Declaration

public virtual void Close()

Declaration

public override void Dispose()

Overrides TelerikInputBase<T>.Dispose()

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Returns

Overrides BaseComponent.OnAfterRenderAsync(bool)

Declaration

protected override Task OnInitializedAsync()

Returns

Overrides TelerikInputBase<T>.OnInitializedAsync()

Programmatically opens the calendar popup to display the date selection interface. Use to implement custom triggers, keyboard shortcuts, or automated popup opening in response to user actions. Opening occurs asynchronously with smooth animations if popup is currently closed. Does nothing if popup is already open - safe to call multiple times without side effects. Respects ReadOnly and disabled states - popup won't open if interaction is prevented.

Declaration

public virtual void Open()

Forces the component to re-render its interface and refresh the calendar popup if currently open. Use after programmatically changing properties, updating disabled dates, or modifying external data. Refresh updates calendar cell styling, recalculates popup positioning, and applies any pending configuration changes. Particularly useful when modifying DisabledDates or implementing dynamic calendar cell customizations. Call after bulk property changes to ensure UI reflects the latest component state.

Declaration

public void Refresh()