Date picker

Picks a single date from a field that opens a calendar.

Refined portWildDatePicker.vueForms/Date PickerWDatePicker

Try it

Click the field, or focus it and press Enter, to open the calendar. Turn on Min / max to limit it to 30 days.

Reading date

Stored as 2026-04-20

Size

Min / max

Error

Disabled

<WildDatePicker
  v-model="date"
  size="sm"
/>

Use it to pick one day, such as the date of a reading.
Set minDate and maxDate when only some days are valid. Days outside stay in place and can’t be picked.

Don’t use it

A trigger and a panel. The trigger uses the text input’s frame, and the panel is the calendar.

empty

holding a date

Two heights, 36 and 44px, the same as the text input. The default is sm.

sm · 36

lg · 44

rest

error

disabled

Put the error message in the form field under the picker. The picker only turns red.

Opening the calendar moves focus to the chosen day, or to today. Closing it returns focus to the field.

Key	What it does
Enter / Space / ↓	On the field, opens the calendar.
Backspace / Delete	On the field, clears the date.
Arrow keys	Move a day or a week, into the next or previous month.
Home / End	Move to the start or end of the week.
Page Up / Page Down	Move a month. With Shift, a year.
Enter / Space	On a day, picks it and closes the calendar.
Escape	Closes the calendar without picking.

Prop	Type	Default	Description
value / defaultValue	string	''	The date as ISO 8601, controlled or uncontrolled.
onChange	(value: string) => void	—	Fires with the ISO string, keeping any time part.
size	'sm' \| 'lg'	'sm'	36 or 44px.
minDate / maxDate	Date \| string \| null	null	The first and last days that can be picked.
error	string	''	Any non-empty text turns the frame red.
disabled	boolean	false	Blocks the field and the calendar.
placeholder	string	'Select date'	Shown while empty. Also the field’s name.
width	number \| string	220	Field width.

Token	Value	Where it lands
--radius-field	10px	The field.
--global-blue-1000	#1877F2	Field on focus and while open.
--color-error / -light	#E12121 / #FFE3E3	Error border and ground.
--global-neutral-grey-900	#7F7D83	Calendar icon; blue-1000 on focus.
--shadow-lg	0 10px 15px -3px …	The open calendar.
--z-index-dropdown	100	The open calendar.
(no token)	4px	Gap between field and calendar.