DatePicker

<ts-date-picker> vv0.6.3

The ts-date-picker component.

Open in Storybook for interactive demos.

Preview

<ts-date-picker first-day-of-week="0" locale="en-US" placeholder="Select date"></ts-date-picker>

Properties

Property	Attribute	Type	Default	Description
disabled	disabled	boolean	false	Whether the date picker is disabled.
error	error	boolean	false	Whether the input is in an error state.
errorMessage	error-message	string | undefined	—	Error message to display.
firstDayOfWeek	first-day-of-week	number	0	First day of the week (0 = Sunday, 1 = Monday, … 6 = Saturday).
label	label	string | undefined	—	Label text for the input.
locale	locale	string	'en-US'	Locale string for date formatting (BCP 47).
max	max	string | undefined	—	Maximum selectable date in ISO format.
min	min	string | undefined	—	Minimum selectable date in ISO format.
name	name	string | undefined	—	Form field name.
placeholder	placeholder	string	'Select date'	Placeholder text for the input.
range	range	boolean	false	Enable date range selection mode.
size	size	"lg" | "md" | "sm"	'md'	The input size.
value	value	string | undefined	—	The selected date value in ISO format (YYYY-MM-DD).
valueEnd	value-end	string | undefined	—	The end date of the selected range in ISO format (YYYY-MM-DD). Only used when range is true.

Events

Event	Detail	Bubbles	Composed	Description
tsChange	`{ value: string; valueEnd?: string	undefined; }`	Yes	Yes

CSS Parts

Use ::part() to style internal elements:

Part	Description
calendar	The calendar dropdown container.
day	Individual day cell.
error	The error message.
grid	The day grid.
header	The month/year navigation header.
label	The label element.
trigger	The input trigger element.

ts-date-picker::part(calendar) {
  /* your custom styles */
}

Usage

HTML

<ts-date-picker first-day-of-week="0" locale="en-US" placeholder="Select date"></ts-date-picker>

React

import { TsDatePicker } from '@tessera-ui/react';

<TsDatePicker firstDayOfWeek="0" locale="en-US"></TsDatePicker>