Skip to content

Commit bcee358

Browse files
segunadebayosegunadebayo
committed
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.
1 parent 2841c87 commit bcee358

11 files changed

Lines changed: 124 additions & 1 deletion

File tree

‎packages/react/src/components/date-input/date-input.stories.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export { Range } from './examples/range'
1919
export { ReadOnly } from './examples/read-only'
2020
export { RootProvider } from './examples/root-provider'
2121
export { RTL } from './examples/rtl'
22+
export { TimeOnly } from './examples/time-only'
2223
export { TimeZone } from './examples/time-zone'
2324
export { WithClearButton } from './examples/with-clear-button'
2425
export { WithDatePicker } from './examples/with-date-picker'

‎packages/react/src/components/date-input/examples/time-only.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { DateInput } from '@ark-ui/react/date-input'
2+
import { DateFormatter } from '@internationalized/date'
3+
import styles from 'styles/date-input.module.css'
4+
5+
const timeFormatter = new DateFormatter('en-US', {
6+
hour: '2-digit',
7+
minute: '2-digit',
8+
hourCycle: 'h23',
9+
})
10+
11+
export const TimeOnly = () => (
12+
<DateInput.Root className={styles.Root} granularity="minute" hourCycle={24} formatter={timeFormatter}>
13+
<DateInput.Label className={styles.Label}>Time</DateInput.Label>
14+
<DateInput.Control className={styles.Control}>
15+
<DateInput.SegmentGroup className={styles.SegmentGroup}>
16+
<DateInput.SegmentContext>
17+
{(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
18+
</DateInput.SegmentContext>
19+
</DateInput.SegmentGroup>
20+
</DateInput.Control>
21+
<DateInput.HiddenInput />
22+
</DateInput.Root>
23+
)

‎packages/solid/src/components/date-input/date-input.stories.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export { Range } from './examples/range'
1919
export { ReadOnly } from './examples/read-only'
2020
export { RootProvider } from './examples/root-provider'
2121
export { RTL } from './examples/rtl'
22+
export { TimeOnly } from './examples/time-only'
2223
export { TimeZone } from './examples/time-zone'
2324
export { WithClearButton } from './examples/with-clear-button'
2425
export { WithDatePicker } from './examples/with-date-picker'

‎packages/solid/src/components/date-input/examples/time-only.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { DateInput } from '@ark-ui/solid/date-input'
2+
import { DateFormatter } from '@internationalized/date'
3+
import styles from 'styles/date-input.module.css'
4+
5+
const timeFormatter = new DateFormatter('en-US', {
6+
hour: '2-digit',
7+
minute: '2-digit',
8+
hourCycle: 'h23',
9+
})
10+
11+
export const TimeOnly = () => (
12+
<DateInput.Root class={styles.Root} granularity="minute" hourCycle={24} formatter={timeFormatter}>
13+
<DateInput.Label class={styles.Label}>Time</DateInput.Label>
14+
<DateInput.Control class={styles.Control}>
15+
<DateInput.SegmentGroup class={styles.SegmentGroup}>
16+
<DateInput.SegmentContext>
17+
{(segment) => <DateInput.Segment class={styles.Segment} segment={segment} />}
18+
</DateInput.SegmentContext>
19+
</DateInput.SegmentGroup>
20+
</DateInput.Control>
21+
<DateInput.HiddenInput />
22+
</DateInput.Root>
23+
)

‎packages/svelte/src/lib/components/date-input/date-input.stories.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import RangeExample from './examples/range.svelte'
1212
import ReadOnlyExample from './examples/read-only.svelte'
1313
import RootProviderExample from './examples/root-provider.svelte'
1414
import RTLExample from './examples/rtl.svelte'
15+
import TimeOnlyExample from './examples/time-only.svelte'
1516
import TimeZoneExample from './examples/time-zone.svelte'
1617
import WithClearButtonExample from './examples/with-clear-button.svelte'
1718
import WithDatePickerExample from './examples/with-date-picker.svelte'
@@ -100,6 +101,12 @@ export const RTL = {
100101
}),
101102
}
102103

104+
export const TimeOnly = {
105+
render: () => ({
106+
Component: TimeOnlyExample,
107+
}),
108+
}
109+
103110
export const TimeZone = {
104111
render: () => ({
105112
Component: TimeZoneExample,

‎packages/svelte/src/lib/components/date-input/examples/time-only.svelte‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script lang="ts">
2+
import { DateInput } from '@ark-ui/svelte/date-input'
3+
import { DateFormatter } from '@internationalized/date'
4+
import styles from 'styles/date-input.module.css'
5+
6+
const timeFormatter = new DateFormatter('en-US', {
7+
hour: '2-digit',
8+
minute: '2-digit',
9+
hourCycle: 'h23',
10+
})
11+
</script>
12+
13+
<DateInput.Root class={styles.Root} granularity="minute" hourCycle={24} formatter={timeFormatter}>
14+
<DateInput.Label class={styles.Label}>Time</DateInput.Label>
15+
<DateInput.Control class={styles.Control}>
16+
<DateInput.SegmentGroup class={styles.SegmentGroup}>
17+
<DateInput.SegmentContext>
18+
{#snippet render(segment)}
19+
<DateInput.Segment class={styles.Segment} {segment} />
20+
{/snippet}
21+
</DateInput.SegmentContext>
22+
</DateInput.SegmentGroup>
23+
</DateInput.Control>
24+
<DateInput.HiddenInput />
25+
</DateInput.Root>

‎packages/vue/src/components/date-input/date-input.stories.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import RangeExample from './examples/range.vue'
1313
import ReadOnlyExample from './examples/read-only.vue'
1414
import RootProviderExample from './examples/root-provider.vue'
1515
import RTLExample from './examples/rtl.vue'
16+
import TimeOnlyExample from './examples/time-only.vue'
1617
import TimeZoneExample from './examples/time-zone.vue'
1718
import WithClearButtonExample from './examples/with-clear-button.vue'
1819
import WithDatePickerExample from './examples/with-date-picker.vue'
@@ -114,6 +115,13 @@ export const RTL = {
114115
}),
115116
}
116117

118+
export const TimeOnly = {
119+
render: () => ({
120+
components: { Component: TimeOnlyExample },
121+
template: '<Component />',
122+
}),
123+
}
124+
117125
export const TimeZone = {
118126
render: () => ({
119127
components: { Component: TimeZoneExample },

‎packages/vue/src/components/date-input/examples/time-only.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script setup lang="ts">
2+
import { DateInput } from '@ark-ui/vue/date-input'
3+
import { DateFormatter } from '@internationalized/date'
4+
import styles from 'styles/date-input.module.css'
5+
6+
const timeFormatter = new DateFormatter('en-US', {
7+
hour: '2-digit',
8+
minute: '2-digit',
9+
hourCycle: 'h23',
10+
})
11+
</script>
12+
13+
<template>
14+
<DateInput.Root :class="styles.Root" granularity="minute" :hour-cycle="24" :formatter="timeFormatter">
15+
<DateInput.Label :class="styles.Label">Time</DateInput.Label>
16+
<DateInput.Control :class="styles.Control">
17+
<DateInput.SegmentGroup :class="styles.SegmentGroup">
18+
<DateInput.SegmentContext v-slot="segment">
19+
<DateInput.Segment :class="styles.Segment" :segment="segment" />
20+
</DateInput.SegmentContext>
21+
</DateInput.SegmentGroup>
22+
</DateInput.Control>
23+
<DateInput.HiddenInput />
24+
</DateInput.Root>
25+
</template>

‎website/src/content/pages/components/date-input.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
id: date-input
33
title: Date Input
44
description: A segment-based date input that allows users to enter dates by navigating individual date parts.
5+
status: Preview
56
---
67

78
<ComponentPreview id="DateInput" />
@@ -52,6 +53,13 @@ Use the `granularity` prop to control which date fields are displayed. Supported
5253

5354
<Example id="granularity" />
5455

56+
### Time Only
57+
58+
To create a time-only input, set `granularity` to `minute` (or `second`) and provide a `formatter` that only includes
59+
time fields. Use the `hourCycle` prop to switch between 12 and 24 hour formats.
60+
61+
<Example id="time-only" />
62+
5563
### Range
5664

5765
To create a date input that allows a range selection, set the `selectionMode` prop to `range` and render two

‎website/src/lib/example-registry.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ import * as DateInput_Range from '@examples/date-input/examples/range'
124124
import * as DateInput_ReadOnly from '@examples/date-input/examples/read-only'
125125
import * as DateInput_RootProvider from '@examples/date-input/examples/root-provider'
126126
import * as DateInput_Rtl from '@examples/date-input/examples/rtl'
127+
import * as DateInput_TimeOnly from '@examples/date-input/examples/time-only'
127128
import * as DateInput_TimeZone from '@examples/date-input/examples/time-zone'
128129
import * as DateInput_WithClearButton from '@examples/date-input/examples/with-clear-button'
129130
import * as DateInput_WithDatePicker from '@examples/date-input/examples/with-date-picker'
@@ -721,6 +722,7 @@ const exampleModules: Record<string, ExampleModule> = {
721722
'date-input/read-only': DateInput_ReadOnly,
722723
'date-input/root-provider': DateInput_RootProvider,
723724
'date-input/rtl': DateInput_Rtl,
725+
'date-input/time-only': DateInput_TimeOnly,
724726
'date-input/time-zone': DateInput_TimeZone,
725727
'date-input/with-clear-button': DateInput_WithClearButton,
726728
'date-input/with-date-picker': DateInput_WithDatePicker,

0 commit comments

Comments
 (0)