DatePicker

<ts-date-picker> vv0.4.0

The ts-date-picker component.

Open in Storybook for interactive demos.

Preview

<ts-date-picker placeholder="Select date" size="md"></ts-date-picker>

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.
`label`	`label`	`string \| undefined`	—	Label text for the input.
`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.
`size`	`size`	`"lg" \| "md" \| "sm"`	`'md'`	The input size.
`value`	`value`	`string \| undefined`	—	The selected date value in ISO format (YYYY-MM-DD).

Event	Detail	Bubbles	Composed	Description
`tsChange`	`{ value: string; }`	Yes	Yes	Emitted when a date is selected.

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 */
}

<ts-date-picker placeholder="Select date" size="md"></ts-date-picker>

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

<TsDatePicker placeholder="Select date" size="md"></TsDatePicker>