Date

Date picker component.

When to Use

Use when users need to select a date.

Basic Usage

Click the input to open the calendar panel. Select a date and it auto-closes.

<TDate v-model="date" placeholder="Select date" />

Preset Value

Pass a preset date value.

<TDate :model-value="'2026-06-01'" />

Range Restriction

Use min and max to restrict selectable date range.

<TDate min="2026-01-01" max="2026-06-30" />

Custom Disabled Dates

Use disabled-date function to disable specific dates (e.g., weekends).

<TDate :disabled-date="(d) => { const day = new Date(d).getDay(); return day === 0 || day === 6 }" />

Sizes

Supports sm, default, and lg sizes.

<TDate size="sm" placeholder="Small" />
<TDate placeholder="Default" />
<TDate size="lg" placeholder="Large" />

Clearable

Set clearable to show a clear button in the panel footer.

<TDate :model-value="'2026-06-01'" clearable />

Disabled

Set disabled to disable date selection.

<TDate disabled placeholder="Disabled" />

Keyboard Input

Type YYYY-MM-DD directly, or MM-DD to auto-complete the current year.

<TDate placeholder="Try typing 12-25" />

Week Select Mode

Set week-select to enable week selection. Click any date to select the entire week. The v-model value uses ISO week format (e.g., 2026-W29).

<TDate week-select placeholder="Select a week" />

API

TDate Props

Prop	Description	Type	Default
model-value	Date value (v-model, format YYYY-MM-DD)	string	''
placeholder	Placeholder text	string	'Select date'
disabled	Disabled	boolean	false
size	Size	'sm' | 'lg'	undefined
clearable	Show clear button	boolean	false
min	Minimum selectable date	string	undefined
max	Maximum selectable date	string	undefined
disabled-date	Custom disabled date function	(date: string) => boolean	undefined
week-select	Enable week selection mode	boolean	false
week-format	Week value format template	string	'{y}-W{wk}'

TDate Events

Event	Description	Parameters
update:model-value	Emitted when date value changes	(value: string) => void
change	Emitted when date is selected	(value: string) => void