DateTime

Combined date and time picker.

When to Use

Use when users need to select both date and time.

Basic Usage

Click the input to open the panel. Select date and time. Format YYYY-MM-DD HH:mm.

<TDateTime v-model="dt" placeholder="Select date & time" />

Date Only

Set :enable-time="false" to hide the time section.

<TDateTime :enable-time="false" placeholder="Date only" />

Fixed Time

Set fixed-time="09:00" to lock the time, only date is adjustable.

<TDateTime fixed-time="09:00" placeholder="Time fixed at 09:00" />

Minute Step

Control the minute increment with minute-step.

<TDateTime :minute-step="15" placeholder="15 min step" />

Sizes

Supports sm, default, and lg.

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

Clearable

<TDateTime :model-value="'2026-06-01 14:30'" clearable />

With Seconds

Set show-seconds to display the seconds column, supporting YYYY-MM-DD HH:mm:ss format.

<TDateTime show-seconds placeholder="Select with seconds" />

API

TDateTime Props

Prop	Description	Type	Default
model-value	Value (v-model, format YYYY-MM-DD HH:mm)	string	''
placeholder	Placeholder	string	'Select date & time'
disabled	Disabled	boolean	false
size	Size	'sm' | 'lg'	undefined
clearable	Show clear button	boolean	false
enable-time	Enable time selection	boolean	true
fixed-time	Fixed time (e.g. "09:00")	string	undefined
min	Minimum date	string	undefined
max	Maximum date	string	undefined
disabled-date	Disabled date function	(date: string) => boolean	undefined
minute-step	Minute step	number	5
show-seconds	Show seconds column	boolean	false

TDateTime Events

Event	Description	Parameters
update:model-value	Value changed	(value: string) => void
change	User confirmed selection	(value: string) => void