Date picker
Installation
npx shadcn@latest add https://ui.timkit.cn/r/date-picker.json
Usage
import { Datepicker } from "@/components/ui/date-picker"
Examples
Calendar Date Picker · Date picker
Loading preview...
Calendar Date Picker · Date range picker
Loading preview...
Calendar Date Picker · Date picker
Loading preview...
Calendar Date Picker · Date range picker
Loading preview...
Structured API
Component
date-picker
Logic
zag / date-picker
Runtime Frameworks
ReactVueWeappHTML
Supported Platforms
Web
Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
| logic.provider* | enum (zag | native | none) | zag | State and interaction provider used by this component. |
| logic.machine | string | date-picker | Underlying state machine identifier when provider is zag. |
| platforms* | array | Web | Platforms officially supported by this schema. |
| frameworks* | array | React, Vue, Weapp, HTML | Framework demos/code currently available in registry files. |
| dependencies | array | @timui/core, @zag-js/popper, @zag-js/react | Runtime package dependencies required by this registry item. |
| optionalPeerDependencies | array | @internationalized/date | Optional peer dependencies used by this registry item. |
| registryDependencies | array | calendar, popover, button | Dependent Timkit registry components/hook entries. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | enum (single | range) | single | The selection mode. |
| placeholder | string | - | The button placeholder. |
| numberOfMonths | number | 1 | The number of months to display. |
Slots
| Prop | Type | Default | Description |
|---|---|---|---|
| default | slot | - | Default slot content rendered inside the component root. |
Parts
| Prop | Type | Default | Description |
|---|---|---|---|
| root* | root | - | The date picker container |
| trigger | part | - | The toggle button |
| content | part | - | The calendar popover content |
This API reference is generated from `/packages/core` component schemas to keep React/Vue/Weapp docs consistent.
Extended notes are not available for this component yet.
Date picker
Installation
npx shadcn@latest add https://ui.timkit.cn/r/date-picker.json
Usage
import { Datepicker } from "@/components/ui/date-picker"
Examples
Calendar Date Picker · Date picker
Loading preview...
Calendar Date Picker · Date range picker
Loading preview...
Calendar Date Picker · Date picker
Loading preview...
Calendar Date Picker · Date range picker
Loading preview...
Structured API
Component
date-picker
Logic
zag / date-picker
Runtime Frameworks
ReactVueWeappHTML
Supported Platforms
Web
Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
| logic.provider* | enum (zag | native | none) | zag | State and interaction provider used by this component. |
| logic.machine | string | date-picker | Underlying state machine identifier when provider is zag. |
| platforms* | array | Web | Platforms officially supported by this schema. |
| frameworks* | array | React, Vue, Weapp, HTML | Framework demos/code currently available in registry files. |
| dependencies | array | @timui/core, @zag-js/popper, @zag-js/react | Runtime package dependencies required by this registry item. |
| optionalPeerDependencies | array | @internationalized/date | Optional peer dependencies used by this registry item. |
| registryDependencies | array | calendar, popover, button | Dependent Timkit registry components/hook entries. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | enum (single | range) | single | The selection mode. |
| placeholder | string | - | The button placeholder. |
| numberOfMonths | number | 1 | The number of months to display. |
Slots
| Prop | Type | Default | Description |
|---|---|---|---|
| default | slot | - | Default slot content rendered inside the component root. |
Parts
| Prop | Type | Default | Description |
|---|---|---|---|
| root* | root | - | The date picker container |
| trigger | part | - | The toggle button |
| content | part | - | The calendar popover content |
This API reference is generated from `/packages/core` component schemas to keep React/Vue/Weapp docs consistent.
Extended notes are not available for this component yet.