Date Picker

A date picker component with field input and optional calendar panel.

vu-date-picker · @velkin/react-pro/date-picker

Copy page

Import

React

npm i @velkin/react-pro

import { LicenseInfo } from "@velkin/license";
// Vite: import.meta.env.VITE_VELKIN_LICENSE_KEY
// Next: process.env.NEXT_PUBLIC_VELKIN_LICENSE_KEY
LicenseInfo.setLicenseKey(import.meta.env.VITE_VELKIN_LICENSE_KEY ?? process.env.NEXT_PUBLIC_VELKIN_LICENSE_KEY ?? "");

// @velkin-pro
import { VuDatePicker } from "@velkin/react-pro/date-picker";

Examples

API

Tables match the member selected under Import.

Props

Prop	Type	Default	Description
mode	VuDatePickerMode	"date"	Selection mode (`date`, `range`, `time`, …). Default: `"date"`.
variant	VuDatePickerVariant	"default"	Field chrome recipe. Default: `"default"`.
tone	VuDatePickerTone	"normal"	Neutral surface weight. Default: `"normal"`.
size	VuDatePickerSize	"md"	Control scale and corner radius. Default: `"md"`.
radius	VuDatePickerRadius	"md"	Corner preset (`none`/`sm`/`md`/`lg`/`full`). Default: `md`.
block	`boolean`	false	Stretches the field to the container width. Default: `false`.
compact	`boolean`	false	Tighter label, hint, and error spacing. Default: `false`.
inline	`boolean`	false	Renders the calendar panel inline (no popover). Default: `false`.
open	`boolean`	false	Popover panel open state. Default: `false`.
closeonselect	`boolean`	true	Closes the panel after a complete selection. Default: `true`.
focusopen	`boolean`	false	Opens the panel when the field receives focus. Default: `false`.
color	`string`	"primary"	Accent token for calendar and time chrome. Default: `"primary"`.
value	`string`	""	Committed date/time string. Default: `""`.
format	`string`	""	Display/wire pattern (`yyyy-MM-dd`, `dd/MM/yyyy HH:mm`, …). Default: `""`.
valueformat	VuDatePickerValueFormat	"local"	Preset when `format` is empty. Default: `"local"`.
placeholder	`string`	""	Input placeholder; derived from `format` when empty.
label	`string`	""	Plain-text label; `label` slot wins when assigned.
hint	`string`	""	Helper text; `hint` slot wins when assigned.
firstdayofweek	`number`	—	Week start day index (0 = Sunday). Default: `1`.
calendars	`number`	1	Side-by-side month grids in the panel (1–3). Default: `1`.
mobilemode	VuDatePickerMobileMode	"auto"	Mobile shell strategy. Default: `"auto"`.
segmented	`boolean`	false	Segmented format input (`mode="date"` only). Default: `false`.
adapter	`null \| DateAdapter`	null	Optional parse/format adapter; default engine when omitted.
sundayholiday	`boolean`	—	Styles Sundays as non-interactive holidays. Default: `false`.
constraints	VuDatePickerConstraints	{}	Min/max and disabled matchers. Default: `{}`.
showerrors	`boolean`	—	Shows validation messages after `validationActive`. Default: `false`.
validationactive	`boolean`	—	Activates hint and error display. Default: `false`.
invalid	`boolean`	false	Marks the field invalid for assistive tech. Default: `false`.
arialabel	`string`	—	Accessible name when no visible label (`arialabel` attr).
name	`string`	—	Form field name for submit.
defaultvalue	`string`	—	Value restored on `<form reset>` (`defaultvalue` attr).
formid	`string`	—	External `<form>` id (`formid` attr).
disabled	`boolean`	—	Non-interactive; blocks panel and input. Default: `false`.
readonly	`boolean`	—	Focusable but value cannot be edited. Default: `false`.
required	`boolean`	—	Blocks valid submit when empty. Default: `false`.
requiredmessage	`string`	—	Custom `valueMissing` message (`requiredmessage` attr).
firstDayOfWeek	`number`	1	Week start day index (0 = Sunday).
sundayHoliday	`boolean`	false	Styles Sundays as non-interactive holidays.
showErrors	`boolean`	false	Shows validation messages after `validationActive`.
validationActive	`boolean`	false	Activates hint and error display.
ariaLabel	`string`	""	Accessible name when no visible label is present.

Events

Event	Detail	Description
vu-change	VuDatePickerChangeDetail	When the committed value changes.

Slots

Slot	Description
label	Rich label markup; takes precedence over string `label` when assigned.
hint	Optional helper copy (HTML); overrides string `hint` when assigned.
error	Replaces default validation message list when assigned.
start	Leading affix inside the field container.
end	Trailing affix inside the field container.
actions	Footer actions inside the calendar panel.
extra	Content below the calendar inside the panel.

CSS parts

Part	Description
container	Field chrome wrapping the input and trigger.
start	Leading affix wrapper.
end	Trailing affix wrapper.
input	Text input or embedded segmented field.
trigger	Calendar icon button opening the panel.
panel	Popover panel hosting the layout.
sheet	Mobile bottom-sheet surface inside the panel.
sheet-header	Mobile toolbar row (Cancel / title / OK).
sheet-title	Mobile sheet heading.
sheet-action	Mobile toolbar action button.
sheet-body	Scrollable calendar region in the mobile shell.
inline-panel	Inline layout region when `inline` is set.

Methods

Method	Description
show	- Opens the popover panel.
hide	- Closes the popover panel.
toggle	- Toggles the popover panel.
reset	- Clears the value and draft selection.

Types

Name	Definition
DateAdapter \| null	`null \| DateAdapter`
VuDatePickerChangeDetail	`{ value: string; date?: string \| null; range?: { start: string \| null; end: string \| null; }; time?: string \| null; timeRange?: { from: string \| null; to: string \| null; }; rangeWithTime?: { start: string \| null; end: string \| null; }; dates?: string[]; week?: string \| null; }`
VuDatePickerConstraints	`{ [P in keyof T]?: T[P]; }`
VuDatePickerMobileMode	`"auto" \| "popover" \| "dialog"`
VuDatePickerMode	`"date" \| "range" \| "multi" \| "week" \| "datetime" \| "time" \| "datetime-range" \| "time-range"`
VuDatePickerRadius	`"sm" \| "md" \| "lg" \| "none" \| "full"`
VuDatePickerSize	`"sm" \| "md" \| "lg"`
VuDatePickerTone	`"subtle" \| "normal" \| "strong"`
VuDatePickerValueFormat	`"local" \| "iso"`
VuDatePickerVariant	`"outline" \| "default" \| "underline"`

Import

React

npm i @velkin/react-pro import { LicenseInfo } from "@velkin/license"; // Vite: import.meta.env.VITE_VELKIN_LICENSE_KEY // Next: process.env.NEXT_PUBLIC_VELKIN_LICENSE_KEY LicenseInfo.setLicenseKey(import.meta.env.VITE_VELKIN_LICENSE_KEY ?? process.env.NEXT_PUBLIC_VELKIN_LICENSE_KEY ?? ""); // @velkin-pro import { VuDatePicker } from "@velkin/react-pro/date-picker";

API

Tables match the member selected under Import.

Props

Prop	Type	Default	Description
mode	VuDatePickerMode	"date"	Selection mode (`date`, `range`, `time`, …). Default: `"date"`.
variant	VuDatePickerVariant	"default"	Field chrome recipe. Default: `"default"`.
tone	VuDatePickerTone	"normal"	Neutral surface weight. Default: `"normal"`.
size	VuDatePickerSize	"md"	Control scale and corner radius. Default: `"md"`.
radius	VuDatePickerRadius	"md"	Corner preset (`none`/`sm`/`md`/`lg`/`full`). Default: `md`.
block	`boolean`	false	Stretches the field to the container width. Default: `false`.
compact	`boolean`	false	Tighter label, hint, and error spacing. Default: `false`.
inline	`boolean`	false	Renders the calendar panel inline (no popover). Default: `false`.
open	`boolean`	false	Popover panel open state. Default: `false`.
closeonselect	`boolean`	true	Closes the panel after a complete selection. Default: `true`.
focusopen	`boolean`	false	Opens the panel when the field receives focus. Default: `false`.
color	`string`	"primary"	Accent token for calendar and time chrome. Default: `"primary"`.
value	`string`	""	Committed date/time string. Default: `""`.
format	`string`	""	Display/wire pattern (`yyyy-MM-dd`, `dd/MM/yyyy HH:mm`, …). Default: `""`.
valueformat	VuDatePickerValueFormat	"local"	Preset when `format` is empty. Default: `"local"`.
placeholder	`string`	""	Input placeholder; derived from `format` when empty.
label	`string`	""	Plain-text label; `label` slot wins when assigned.
hint	`string`	""	Helper text; `hint` slot wins when assigned.
firstdayofweek	`number`	—	Week start day index (0 = Sunday). Default: `1`.
calendars	`number`	1	Side-by-side month grids in the panel (1–3). Default: `1`.
mobilemode	VuDatePickerMobileMode	"auto"	Mobile shell strategy. Default: `"auto"`.
segmented	`boolean`	false	Segmented format input (`mode="date"` only). Default: `false`.
adapter	`null \| DateAdapter`	null	Optional parse/format adapter; default engine when omitted.
sundayholiday	`boolean`	—	Styles Sundays as non-interactive holidays. Default: `false`.
constraints	VuDatePickerConstraints	{}	Min/max and disabled matchers. Default: `{}`.
showerrors	`boolean`	—	Shows validation messages after `validationActive`. Default: `false`.
validationactive	`boolean`	—	Activates hint and error display. Default: `false`.
invalid	`boolean`	false	Marks the field invalid for assistive tech. Default: `false`.
arialabel	`string`	—	Accessible name when no visible label (`arialabel` attr).
name	`string`	—	Form field name for submit.
defaultvalue	`string`	—	Value restored on `<form reset>` (`defaultvalue` attr).
formid	`string`	—	External `<form>` id (`formid` attr).
disabled	`boolean`	—	Non-interactive; blocks panel and input. Default: `false`.
readonly	`boolean`	—	Focusable but value cannot be edited. Default: `false`.
required	`boolean`	—	Blocks valid submit when empty. Default: `false`.
requiredmessage	`string`	—	Custom `valueMissing` message (`requiredmessage` attr).
firstDayOfWeek	`number`	1	Week start day index (0 = Sunday).
sundayHoliday	`boolean`	false	Styles Sundays as non-interactive holidays.
showErrors	`boolean`	false	Shows validation messages after `validationActive`.
validationActive	`boolean`	false	Activates hint and error display.
ariaLabel	`string`	""	Accessible name when no visible label is present.

Events

Event	Detail	Description
vu-change	VuDatePickerChangeDetail	When the committed value changes.

Slots

Slot	Description
label	Rich label markup; takes precedence over string `label` when assigned.
hint	Optional helper copy (HTML); overrides string `hint` when assigned.
error	Replaces default validation message list when assigned.
start	Leading affix inside the field container.
end	Trailing affix inside the field container.
actions	Footer actions inside the calendar panel.
extra	Content below the calendar inside the panel.

CSS parts

Part	Description
container	Field chrome wrapping the input and trigger.
start	Leading affix wrapper.
end	Trailing affix wrapper.
input	Text input or embedded segmented field.
trigger	Calendar icon button opening the panel.
panel	Popover panel hosting the layout.
sheet	Mobile bottom-sheet surface inside the panel.
sheet-header	Mobile toolbar row (Cancel / title / OK).
sheet-title	Mobile sheet heading.
sheet-action	Mobile toolbar action button.
sheet-body	Scrollable calendar region in the mobile shell.
inline-panel	Inline layout region when `inline` is set.

Methods

Method	Description
show	- Opens the popover panel.
hide	- Closes the popover panel.
toggle	- Toggles the popover panel.
reset	- Clears the value and draft selection.

Types

Name	Definition
DateAdapter \| null	`null \| DateAdapter`
VuDatePickerChangeDetail	`{ value: string; date?: string \| null; range?: { start: string \| null; end: string \| null; }; time?: string \| null; timeRange?: { from: string \| null; to: string \| null; }; rangeWithTime?: { start: string \| null; end: string \| null; }; dates?: string[]; week?: string \| null; }`
VuDatePickerConstraints	`{ [P in keyof T]?: T[P]; }`
VuDatePickerMobileMode	`"auto" \| "popover" \| "dialog"`
VuDatePickerMode	`"date" \| "range" \| "multi" \| "week" \| "datetime" \| "time" \| "datetime-range" \| "time-range"`
VuDatePickerRadius	`"sm" \| "md" \| "lg" \| "none" \| "full"`
VuDatePickerSize	`"sm" \| "md" \| "lg"`
VuDatePickerTone	`"subtle" \| "normal" \| "strong"`
VuDatePickerValueFormat	`"local" \| "iso"`
VuDatePickerVariant	`"outline" \| "default" \| "underline"`

Import

Examples

API

Props

Events

Slots

CSS parts

Methods

Types

Related

Companions

Inputs

Guides

Browse

Import

Examples

API

Props

Events

Slots

CSS parts

Methods

Types

Related

Companions

Inputs

Guides

Browse