Tesserae

DateRangePicker

Description

A composite picker for selecting a contiguous range of dates ("from" → "to"). Internally composed of two DatePicker instances joined by a visual separator. The two pickers stay in sync: setting the "from" date raises the "to" picker's minimum, and vice-versa.

Usage

API reference

class

DateRangePicker

public sealed class DateRangePicker : IComponent, IHasMarginPadding

A composite picker for selecting a contiguous range of dates ("from" → "to"). Internally composed of two DatePicker instances joined by a visual separator. The two pickers stay in sync: setting the "from" date raises the "to" picker's minimum, and vice-versa.

Examples

 var range = UI.DateRangePicker(DateTime.Today, DateTime.Today.AddDays(7));
 range.OnChange((s, _) =>
 {
     Console.WriteLine($"{s.From:d} to {s.To:d}");
 });
Namespace
Tesserae
Implements
IComponent, IHasMarginPadding

Constructors

NameDescription
DateRangePickerCreates a new date-range picker, optionally initialised with a range.
Constructor
DateRangePicker
public DateRangePicker(DateTime? from = null, DateTime? to = null)

Creates a new date-range picker, optionally initialised with a range.

Parameters

from
Initial "from" date, or null for an empty start.
to
Initial "to" date, or null for an empty end.

Properties

NameDescription
FromGets the currently selected "from" date, or null if no date has been picked.
ToGets the currently selected "to" date, or null if no date has been picked.
FromPickerGets the inner picker used for the "from" date. Useful for advanced configuration (min/max bounds, validation).
ToPickerGets the inner picker used for the "to" date. Useful for advanced configuration (min/max bounds, validation).
MarginGets or sets the outer container's CSS margin.
PaddingGets or sets the outer container's CSS padding.
Property
DateRangePicker.From
public DateTime? From

Gets the currently selected "from" date, or null if no date has been picked.

Property
DateRangePicker.To
public DateTime? To

Gets the currently selected "to" date, or null if no date has been picked.

Property
DateRangePicker.FromPicker
public DatePicker FromPicker

Gets the inner picker used for the "from" date. Useful for advanced configuration (min/max bounds, validation).

Property
DateRangePicker.ToPicker
public DatePicker ToPicker

Gets the inner picker used for the "to" date. Useful for advanced configuration (min/max bounds, validation).

Property
DateRangePicker.Margin
public string Margin { get ; set ; }

Gets or sets the outer container's CSS margin.

Property
DateRangePicker.Padding
public string Padding { get ; set ; }

Gets or sets the outer container's CSS padding.

Methods

NameDescription
SetFromSets the "from" date programmatically.
SetToSets the "to" date programmatically.
OnChangeRegisters a callback fired whenever either the "from" or "to" date changes.
RenderRenders the picker's container element.
Method
DateRangePicker.SetFrom
public DateRangePicker SetFrom(DateTime date)

Sets the "from" date programmatically.

Method
DateRangePicker.SetTo
public DateRangePicker SetTo(DateTime date)

Sets the "to" date programmatically.

Method
DateRangePicker.OnChange
Overload
OnChange(Action<DateRangePicker>)Registers a callback fired whenever either the "from" or "to" date changes.
OnChange(Action<DateRangePicker, Event>)Registers a callback fired whenever either the "from" or "to" date changes. The two-argument overload mirrors the convention used elsewhere in the toolkit (sender + event args).
OnChange(Action<DateRangePicker>)
public DateRangePicker OnChange(Action<DateRangePicker> handler)

Registers a callback fired whenever either the "from" or "to" date changes.

Parameters

handler Action<DateRangePicker>
OnChange(Action<DateRangePicker, Event>)
public DateRangePicker OnChange(Action<DateRangePicker, Event> handler)

Registers a callback fired whenever either the "from" or "to" date changes. The two-argument overload mirrors the convention used elsewhere in the toolkit (sender + event args).

Parameters

handler Action<DateRangePicker, Event>
Method
DateRangePicker.Render
public HTMLElement Render()

Renders the picker's container element.

See also

© 2026 Curiosity. All rights reserved.