From bcee35815a0d86308672c6acbaa7554908ed7ac4 Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Sat, 23 May 2026 13:45:01 +0200 Subject: [PATCH] docs(date-input): add time-only example and show in sidebar as preview Add a time-only date input example (granularity minute, 24-hour cycle, custom time formatter) across React, Solid, Svelte, and Vue. Uncomment date-input in the sidebar config and mark it as Preview. --- .../date-input/date-input.stories.tsx | 1 + .../date-input/examples/time-only.tsx | 23 +++++++++++++++++ .../date-input/date-input.stories.tsx | 1 + .../date-input/examples/time-only.tsx | 23 +++++++++++++++++ .../date-input/date-input.stories.ts | 7 ++++++ .../date-input/examples/time-only.svelte | 25 +++++++++++++++++++ .../date-input/date-input.stories.ts | 8 ++++++ .../date-input/examples/time-only.vue | 25 +++++++++++++++++++ .../content/pages/components/date-input.mdx | 8 ++++++ website/src/lib/example-registry.ts | 2 ++ website/src/lib/sidebar-config.ts | 2 +- 11 files changed, 124 insertions(+), 1 deletion(-) create mode 100644 packages/react/src/components/date-input/examples/time-only.tsx create mode 100644 packages/solid/src/components/date-input/examples/time-only.tsx create mode 100644 packages/svelte/src/lib/components/date-input/examples/time-only.svelte create mode 100644 packages/vue/src/components/date-input/examples/time-only.vue diff --git a/packages/react/src/components/date-input/date-input.stories.tsx b/packages/react/src/components/date-input/date-input.stories.tsx index 97ded8f1cc..f66c53f081 100644 --- a/packages/react/src/components/date-input/date-input.stories.tsx +++ b/packages/react/src/components/date-input/date-input.stories.tsx @@ -19,6 +19,7 @@ export { Range } from './examples/range' export { ReadOnly } from './examples/read-only' export { RootProvider } from './examples/root-provider' export { RTL } from './examples/rtl' +export { TimeOnly } from './examples/time-only' export { TimeZone } from './examples/time-zone' export { WithClearButton } from './examples/with-clear-button' export { WithDatePicker } from './examples/with-date-picker' diff --git a/packages/react/src/components/date-input/examples/time-only.tsx b/packages/react/src/components/date-input/examples/time-only.tsx new file mode 100644 index 0000000000..5a222e746c --- /dev/null +++ b/packages/react/src/components/date-input/examples/time-only.tsx @@ -0,0 +1,23 @@ +import { DateInput } from '@ark-ui/react/date-input' +import { DateFormatter } from '@internationalized/date' +import styles from 'styles/date-input.module.css' + +const timeFormatter = new DateFormatter('en-US', { + hour: '2-digit', + minute: '2-digit', + hourCycle: 'h23', +}) + +export const TimeOnly = () => ( + + Time + + + + {(segment) => } + + + + + +) diff --git a/packages/solid/src/components/date-input/date-input.stories.tsx b/packages/solid/src/components/date-input/date-input.stories.tsx index 1a764c2198..d6dc7853e5 100644 --- a/packages/solid/src/components/date-input/date-input.stories.tsx +++ b/packages/solid/src/components/date-input/date-input.stories.tsx @@ -19,6 +19,7 @@ export { Range } from './examples/range' export { ReadOnly } from './examples/read-only' export { RootProvider } from './examples/root-provider' export { RTL } from './examples/rtl' +export { TimeOnly } from './examples/time-only' export { TimeZone } from './examples/time-zone' export { WithClearButton } from './examples/with-clear-button' export { WithDatePicker } from './examples/with-date-picker' diff --git a/packages/solid/src/components/date-input/examples/time-only.tsx b/packages/solid/src/components/date-input/examples/time-only.tsx new file mode 100644 index 0000000000..28b079cd68 --- /dev/null +++ b/packages/solid/src/components/date-input/examples/time-only.tsx @@ -0,0 +1,23 @@ +import { DateInput } from '@ark-ui/solid/date-input' +import { DateFormatter } from '@internationalized/date' +import styles from 'styles/date-input.module.css' + +const timeFormatter = new DateFormatter('en-US', { + hour: '2-digit', + minute: '2-digit', + hourCycle: 'h23', +}) + +export const TimeOnly = () => ( + + Time + + + + {(segment) => } + + + + + +) diff --git a/packages/svelte/src/lib/components/date-input/date-input.stories.ts b/packages/svelte/src/lib/components/date-input/date-input.stories.ts index a59504c7c5..e5eef43306 100644 --- a/packages/svelte/src/lib/components/date-input/date-input.stories.ts +++ b/packages/svelte/src/lib/components/date-input/date-input.stories.ts @@ -12,6 +12,7 @@ import RangeExample from './examples/range.svelte' import ReadOnlyExample from './examples/read-only.svelte' import RootProviderExample from './examples/root-provider.svelte' import RTLExample from './examples/rtl.svelte' +import TimeOnlyExample from './examples/time-only.svelte' import TimeZoneExample from './examples/time-zone.svelte' import WithClearButtonExample from './examples/with-clear-button.svelte' import WithDatePickerExample from './examples/with-date-picker.svelte' @@ -100,6 +101,12 @@ export const RTL = { }), } +export const TimeOnly = { + render: () => ({ + Component: TimeOnlyExample, + }), +} + export const TimeZone = { render: () => ({ Component: TimeZoneExample, diff --git a/packages/svelte/src/lib/components/date-input/examples/time-only.svelte b/packages/svelte/src/lib/components/date-input/examples/time-only.svelte new file mode 100644 index 0000000000..3099557b5e --- /dev/null +++ b/packages/svelte/src/lib/components/date-input/examples/time-only.svelte @@ -0,0 +1,25 @@ + + + + Time + + + + {#snippet render(segment)} + + {/snippet} + + + + + diff --git a/packages/vue/src/components/date-input/date-input.stories.ts b/packages/vue/src/components/date-input/date-input.stories.ts index bf99225865..a0564335d1 100644 --- a/packages/vue/src/components/date-input/date-input.stories.ts +++ b/packages/vue/src/components/date-input/date-input.stories.ts @@ -13,6 +13,7 @@ import RangeExample from './examples/range.vue' import ReadOnlyExample from './examples/read-only.vue' import RootProviderExample from './examples/root-provider.vue' import RTLExample from './examples/rtl.vue' +import TimeOnlyExample from './examples/time-only.vue' import TimeZoneExample from './examples/time-zone.vue' import WithClearButtonExample from './examples/with-clear-button.vue' import WithDatePickerExample from './examples/with-date-picker.vue' @@ -114,6 +115,13 @@ export const RTL = { }), } +export const TimeOnly = { + render: () => ({ + components: { Component: TimeOnlyExample }, + template: '', + }), +} + export const TimeZone = { render: () => ({ components: { Component: TimeZoneExample }, diff --git a/packages/vue/src/components/date-input/examples/time-only.vue b/packages/vue/src/components/date-input/examples/time-only.vue new file mode 100644 index 0000000000..c8dc9f48ab --- /dev/null +++ b/packages/vue/src/components/date-input/examples/time-only.vue @@ -0,0 +1,25 @@ + + + diff --git a/website/src/content/pages/components/date-input.mdx b/website/src/content/pages/components/date-input.mdx index 523e0f00cd..988bae1c89 100644 --- a/website/src/content/pages/components/date-input.mdx +++ b/website/src/content/pages/components/date-input.mdx @@ -2,6 +2,7 @@ id: date-input title: Date Input description: A segment-based date input that allows users to enter dates by navigating individual date parts. +status: Preview --- @@ -52,6 +53,13 @@ Use the `granularity` prop to control which date fields are displayed. Supported +### Time Only + +To create a time-only input, set `granularity` to `minute` (or `second`) and provide a `formatter` that only includes +time fields. Use the `hourCycle` prop to switch between 12 and 24 hour formats. + + + ### Range To create a date input that allows a range selection, set the `selectionMode` prop to `range` and render two diff --git a/website/src/lib/example-registry.ts b/website/src/lib/example-registry.ts index 0d1467a5e1..820d2f6265 100644 --- a/website/src/lib/example-registry.ts +++ b/website/src/lib/example-registry.ts @@ -124,6 +124,7 @@ import * as DateInput_Range from '@examples/date-input/examples/range' import * as DateInput_ReadOnly from '@examples/date-input/examples/read-only' import * as DateInput_RootProvider from '@examples/date-input/examples/root-provider' import * as DateInput_Rtl from '@examples/date-input/examples/rtl' +import * as DateInput_TimeOnly from '@examples/date-input/examples/time-only' import * as DateInput_TimeZone from '@examples/date-input/examples/time-zone' import * as DateInput_WithClearButton from '@examples/date-input/examples/with-clear-button' import * as DateInput_WithDatePicker from '@examples/date-input/examples/with-date-picker' @@ -721,6 +722,7 @@ const exampleModules: Record = { 'date-input/read-only': DateInput_ReadOnly, 'date-input/root-provider': DateInput_RootProvider, 'date-input/rtl': DateInput_Rtl, + 'date-input/time-only': DateInput_TimeOnly, 'date-input/time-zone': DateInput_TimeZone, 'date-input/with-clear-button': DateInput_WithClearButton, 'date-input/with-date-picker': DateInput_WithDatePicker, diff --git a/website/src/lib/sidebar-config.ts b/website/src/lib/sidebar-config.ts index 00ba70721d..dd1ea7aafa 100644 --- a/website/src/lib/sidebar-config.ts +++ b/website/src/lib/sidebar-config.ts @@ -44,7 +44,7 @@ export const sidebarConfig: SidebarGroupConfig[] = [ { id: 'collapsible' }, { id: 'color-picker' }, { id: 'combobox' }, - // { id: 'date-input' }, + { id: 'date-input' }, { id: 'date-picker' }, { id: 'dialog' }, { id: 'drawer' },