Table of Contents

Class TwDatePicker

Namespace
TwBlazor.Components
Assembly
TwBlazor.dll

Represents a date picker component that allows users to select a date from a calendar interface or enter a date manually.

public class TwDatePicker : TwPopoverPickerComponentBase, IComponent, IHandleEvent, IHandleAfterRender, ITwComponent, ITwInputComponent, IAsyncDisposable
Inheritance
TwDatePicker
Implements
Inherited Members

Remarks

The TwDatePicker component supports two-way binding for both the selected date and its string representation. It provides customizable display formatting and placeholder text. The component is designed for use in Blazor applications and can be integrated with other components, such as TwDateTimePicker, via the FocusedChildContent parameter. Thread safety is not guaranteed; use the component only within the Blazor UI thread.

Constructors

TwDatePicker() 

public TwDatePicker()

Properties

BodyClasses

Gets or sets the CSS class names to apply to the body element of the component.

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

Property Value

string

Remarks

Use this property to customize the styling of the component's body by specifying one or more CSS class names. Multiple classes can be separated by spaces. This allows dynamic styling based on the component's state or context.

FocusedChildContent

Child content to be rendered when the date picker is focused, this is used for TwDateTimePicker.

[Parameter]
public RenderFragment? FocusedChildContent { get; set; }

Property Value

RenderFragment

Format

The string format used to display the SelectedDate. Leave unset to fall back to DefaultFormat (default 'dd/MM/yyyy').

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

Property Value

string

NativeFormat

The string format used for Value when the native picker is active, default value is 'yyyy-MM-dd'. This must match the ISO format expected by NativeInputType.

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

Property Value

string

NativeInputType

The HTML input type to use when the native picker is active, default value is 'date'. Set to 'datetime-local' by TwDateTimePicker so it can reuse this component's native-picker support.

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

Property Value

string

Placeholder

The placeholder text to display when no date is selected.

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

Property Value

string

Remarks

If not set, defaults to Format lower-cased (e.g. "dd/mm/yyyy") so the placeholder itself communicates the exact pattern typed input is parsed against, rather than a generic instruction that gives no clue what's actually expected.

SelectedDate

The DateTime value of the selected date.

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

Property Value

DateTime

SelectedDateChanged

The DateTime bound value of the selected date.

[Parameter]
public EventCallback<DateTime> SelectedDateChanged { get; set; }

Property Value

EventCallback<DateTime>

Value

The string value displayed in the textbox to the user.

[Parameter]
public string? Value { get; set; }

Property Value

string

ValueChanged

The string bound value displayed in the textbox to the user.

[Parameter]
public EventCallback<string> ValueChanged { get; set; }

Property Value

EventCallback<string>

triggerInputRef

Reference to the trigger textfield's actual <input> element, supplied by derived pickers (TwDatePicker, TwTimePicker) that render a TwTextfield<T> trigger. Used by OnIconClickAsync() to focus that element directly.

protected override ElementReference? triggerInputRef { get; }

Property Value

ElementReference?

Methods

BuildRenderTree(RenderTreeBuilder)

Renders the component to the supplied RenderTreeBuilder.

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

__builder RenderTreeBuilder

OnAfterRenderAsync(bool)

Determines, via PreferNativePicker or JS-based device detection, whether the browser's native date input should be used instead of the custom popover, then re-renders if that changes the input's format/type.

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

firstRender bool

Returns

Task

OnFocusAsync()

Re-seeds TwBlazor.Components.TwDatePicker.anchorDate to the actual SelectedDate every time the panel opens, so navigation abandoned without picking anything (browsing to another month/year, then clicking away) doesn't linger the next time the picker is opened - it always starts back at the real selection's own month.

protected override Task OnFocusAsync()

Returns

Task

OnInitialized()

Initializes the component and sets the initial value from the selected date.

protected override void OnInitialized()

Exceptions

ArgumentException

Thrown when Format is explicitly set to an empty string.

Edit this page