Import
import { DatePicker , DatePickerTrigger , DatePickerContent , DatePickerInput , DatePickerButton , DatePickerCalendar , } from '@strongtie/design-system/date-picker' ;
Usage
< DatePicker > < DatePickerTrigger asChild > < DatePickerInput placeholder = "Select date" /> </ DatePickerTrigger > < DatePickerContent > < DatePickerCalendar mode = "single" selected = { date } onSelect = { setDate } /> </ DatePickerContent > </ DatePicker > <DatePicker> PropsControls the open state of the Date Picker popup.
Callback function called when the open state changes.
The default open state of the Date Picker.
Whether the Date Picker should be modal.
<DatePickerTrigger> PropsIf true, the trigger will render as a child component.
<DatePickerContent> Propsalign
"start" | "center" | "end"
default: "\"end\""
The alignment of the popover content relative to the trigger.
The offset in pixels from the alignment position.
The offset in pixels from the trigger.
Callback function called when the calendar icon is clicked.
Implements all Input Props placeholder
string
default: "\"Select date\""
Text displayed when no date is selected.
The currently selected date.
Function to format the selected date for display.
Implements all Button Props <DatePickerCalendar> PropscaptionLayout
"label" | "dropdown" | "dropdown-months" | "dropdown-years"
default: "\"dropdown\""
The layout style for the calendar navigation. “buttons” shows navigation arrows, “dropdown” shows month/year dropdowns, “label” shows just the month/year text.
Implements all Calendar Props Styling Classes The component applies the following CSS classes:
date-picker-content - Popover content containerdate-picker-input-wrapper - Input field wrapper containerdate-picker-input - Input field elementdate-picker-input-button - Calendar toggle buttondate-picker-icon - Calendar and chevron iconsdate-picker-icon-down - Chevron icon in down statedate-picker-button - Button variant triggerdate-picker-placeholder - Placeholder text styling Usage Examples Basic Input
Button Variant
function DatePickerDemo () { const [ open , setOpen ] = React . useState ( false ); const [ date , setDate ] = React . useState < Date | undefined >( new Date ()); const [ value , setValue ] = React . useState ( '' ); return ( < DatePicker open = { open } onOpenChange = { setOpen } > < DatePickerTrigger asChild > < DatePickerInput value = { value } onChange = { ( e ) => setValue ( e . target . value ) } onCalendarClick = { () => setOpen ( true ) } placeholder = "Select date" /> </ DatePickerTrigger > < DatePickerContent > < DatePickerCalendar mode = "single" selected = { date } onSelect = { ( selectedDate ) => { setDate ( selectedDate ); if ( selectedDate ) { setValue ( selectedDate . toLocaleDateString ()); } setOpen ( false ); } } /> </ DatePickerContent > </ DatePicker > ); }
The StudsDatePickerCalendar component is a wrapper around the react-day-picker DayPicker component and supports all of its props. For complete prop reference, see the react-day-picker documentation . For more examples, visit the Storybook . < StudsDatePicker @bind-Value = "selectedDate" TValue = "DateTime?" /> @code { DateTime ? selectedDate = DateTime . Now ; } <StudsDatePicker> ParametersThe bound value of the Date Picker. The type depends on the TValue generic parameter.
Callback invoked when the value changes.
Expression that identifies the bound value (used for validation).
Callback invoked when the date changes.
Callback invoked when the current displayed date changes.
The name attribute of the input element.
Placeholder text for the input field.
Whether the Date Picker is disabled.
Whether the Date Picker is read-only.
Whether direct input into the text field is allowed.
Whether a clear button is shown when there’s a value.
Whether to display the calendar inline without a popup.
Whether to show only the time picker without the calendar.
Whether to show the time picker along with the calendar.
Whether to show the days in the calendar view.
Whether to show seconds in the time picker.
Whether to show the calendar toggle button.
Whether to show the OK button in the time picker.
Whether to show calendar week numbers.
The format string for displaying dates.
YearRange
string
default: "\"1950:2054\""
The range of years available for selection.
The hour format for time display (“12” or “24”).
The minimum selectable date.
The maximum selectable date.
The initial date/month to display in the calendar.
The step value for hours in the time picker.
The step value for minutes in the time picker.
The step value for seconds in the time picker.
Whether to pad hours with leading zeros.
Whether to pad minutes with leading zeros.
Whether to pad seconds with leading zeros.
The tab index for keyboard navigation.
Additional CSS classes for the input element.
Additional CSS classes for the toggle button.
InputAttributes
IReadOnlyDictionary<string, object>
Additional attributes to apply to the input element.
DateRender
Action<DateRenderEventArgs>
Callback to customize the rendering of individual dates.
Template for custom footer content in the calendar.
Custom function to parse input strings into DateTime values.
Kind
DateTimeKind
default: "DateTimeKind.Unspecified"
The DateTime kind to use for the bound value.
Controls when the popup content is rendered.
The title text for the calendar week column.
ToggleAriaLabel
string
default: "\"Toggle\""
ARIA label for the calendar toggle button.
ARIA label for the OK button.
PrevMonthAriaLabel
string
default: "\"Previous month\""
ARIA label for the previous month button.
NextMonthAriaLabel
string
default: "\"Next month\""
ARIA label for the next month button.
ToggleAmPmAriaLabel
string
default: "\"Toggle Am/Pm\""
ARIA label for the AM/PM toggle button.
Attributes
Dictionary<string, object>
Specifies additional custom attributes that will be rendered by the component.
MouseEnter
EventCallback<ElementReference>
Gets or sets the callback that is invoked when the mouse enters an item.
MouseLeave
EventCallback<ElementReference>
Gets or sets the callback that is invoked when the mouse leaves an item.
A callback that will be invoked when the user right-clicks the component. Commonly used to display a context menu.
Culture
CultureInfo
default: "CultureInfo.CurrentCulture"
Gets or sets the culture used to display localizable data (numbers, dates). Set by default to “CultureInfo.CurrentCulture”.
Gets or sets the inline CSS style.
Gets or sets a value indicating whether this “T:Studs.StudsComponent” is visible. Invisible components are not rendered.
Styling Classes The component applies the following CSS classes:
datepicker - Root Date Picker containerdatepicker-inline-container - Container for inline calendar displaydatepicker-popup-container - Container for popup calendar displaydatepicker-trigger - Calendar toggle buttondatepicker-footer - Footer area for custom contentdatepicker-week-number - Week number header cellsinputtext - Input field for date textreadonly - Read-only input stylinginput-trigger - Input field when used as triggerdropdown-clear-icon - Clear button iconcalendar - Main calendar containercalendar-header - Calendar navigation headercalendar-title - Month/year title containercalendar-prev - Previous month navigation buttoncalendar-next - Next month navigation buttoncalendar-prev-icon - Previous month iconcalendar-next-icon - Next month iconcalendar-month-dropdown - Month selection dropdowncalendar-year-dropdown - Year selection dropdowncalendar-view-container - Container for calendar gridcalendar-view - Calendar table viewcalendar-month-view - Month view specific stylingcalendar-other-month - Days from adjacent monthscalendar-week-number - Week number data cellscalendar-today - Today’s date stylingtimepicker - Time picker containerhour-picker - Hour input fieldminute-picker - Minute input fieldsecond-picker - Second input fieldampm-picker - AM/PM toggle container Usage Examples < StudsDatePicker @bind-Value = "selectedDate" TValue = "DateTime?" /> @code { DateTime ? selectedDate = DateTime . Now ; }
For more examples, visit the Storybook . 