SGUI / Development
DateField
Segmented ISO date and local datetime inputs with bounds and hour-cycle controls.
Loading examples…
Loading examples…
Examples
Loading examples…
Contains
No fixed SGUI child components.
Component documentation
SGUI / Development
Segmented ISO date and local datetime inputs with bounds and hour-cycle controls.
Loading examples…
Loading examples…
Loading examples…
No fixed SGUI child components.
Explore ISO values, field states and host-owned availability. The selected example theme also applies to picker portals.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { DateField } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function DateFieldPlaygroundExample() {
const [value, setValue] = useState<string | null>("2026-10-14");
return (
<>
<ThemeScope density="comfortable">
<Stack align="start" gap={3}>
<DateField label={"Course schedule"} disabled={false} readOnly={false} referenceDate="2026-10-16" description={"Local value supplied by your host."} descriptionPlacement="above" errorPlacement="below" required={false} invalid={false} errorMessage="Please review this schedule." kind="date" entryMode="segments" hourCycle={24} value={value} onValueChange={setValue} name="schedule" />
</Stack>
</ThemeScope>
</>
);
}
Compare segment, calendar and action target spacing in an independent scope.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { DateField } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function DateFieldCompactExample() {
const [value, setValue] = useState<string | null>("2026-10-14");
return (
<>
<ThemeScope density="compact">
<Stack align="start" gap={3}>
<DateField label={"Course schedule"} disabled={false} readOnly={false} referenceDate="2026-10-16" description={"Local value supplied by your host."} descriptionPlacement="above" errorPlacement="below" required={false} invalid={false} errorMessage="Please review this schedule." kind="date" entryMode="segments" hourCycle={24} value={value} onValueChange={setValue} name="schedule" />
</Stack>
</ThemeScope>
</>
);
}
Compare segment, calendar and action target spacing in an independent scope.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { DateField } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function DateFieldComfortableExample() {
const [value, setValue] = useState<string | null>("2026-10-14");
return (
<>
<ThemeScope density="comfortable">
<Stack align="start" gap={3}>
<DateField label={"Course schedule"} disabled={false} readOnly={false} referenceDate="2026-10-16" description={"Local value supplied by your host."} descriptionPlacement="above" errorPlacement="below" required={false} invalid={false} errorMessage="Please review this schedule." kind="date" entryMode="segments" hourCycle={24} value={value} onValueChange={setValue} name="schedule" />
</Stack>
</ThemeScope>
</>
);
}
Native fields serialize local values. Hosts own persistence, timezone and availability policy.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { DateField, Button } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function DateFieldFormExample() {
const [value, setValue] = useState<string | null>("2026-10-14");
const [submits, setSubmits] = useState(0);
return (
<>
<ThemeScope density="comfortable">
<form onSubmit={event => { event.preventDefault(); setSubmits(count => count + 1); }}>
<Stack align="start" gap={3}>
<Stack align="start" gap={3}>
<DateField label={"Course schedule"} disabled={false} readOnly={false} referenceDate="2026-10-16" description={"Local value supplied by your host."} descriptionPlacement="above" errorPlacement="below" required={true} invalid={false} errorMessage="Please review this schedule." kind="date" entryMode="segments" hourCycle={24} value={value} onValueChange={setValue} name="schedule" />
</Stack>
<Button type="submit">Submit schedule locally</Button>
<Typography role="status">Submitted {submits} times. Host owns persistence.</Typography>
</Stack>
</form>
</ThemeScope>
</>
);
}
For memorable dates, direct entry avoids navigating a calendar. Leave the birthday empty initially; valid input normalizes on blur or Enter.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {DateField} from '@structured-growth/sg-ui/experimental';
import {Box} from '@structured-growth/sg-ui/primitives';
export default function BirthdayFieldExample() {
const [date,setDate]=useState<string|null>(null);
return (
<>
<ThemeScope density="compact">
<Box style={{inlineSize:'fit-content',maxInlineSize:'min(100%, 22rem)'}}>
<DateField label="Select your birthday" entryMode="text" min="1900-01-01" max="2026-10-16" name="birthday" description="For example, May 21, 1984. The host supplies the allowed dates." value={date} onValueChange={setDate}/>
</Box>
</ThemeScope>
</>
);
}
DateField produces a timezone-free local datetime. The host chooses the IANA timezone and rejects ambiguous or nonexistent clock-change times by default. Earlier/later are explicit host resolutions. Civil dates and date ranges stay YYYY-MM-DD values and are never converted merely for calendar display.
'use client';
import { useState } from 'react';
import { Button, DateField, Select, dateTimeToInstant } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function SessionInstantExample() {
const [value,setValue]=useState<string|null>("2026-11-01T01:30:00");
const [zone,setZone]=useState("America/Chicago");
const [resolution,setResolution]=useState<'reject'|'earlier'|'later'>("reject");
const [result,setResult]=useState("");
function resolve() {try {setResult(value?dateTimeToInstant(value,zone,resolution):'Choose a complete local datetime.');} catch {setResult('This local time is ambiguous or unavailable. Choose another time or an explicit resolution.');}}
return (
<>
<Stack gap={3}>
<DateField label="Local session start" kind="datetime" value={value} onValueChange={setValue} hourCycle={24} />
<Select label="Host timezone" options={[{"id":"America/Chicago","label":"America/Chicago"},{"id":"Asia/Tokyo","label":"Asia/Tokyo"}]} value={zone} onValueChange={next=>{if(next)setZone(next);}} />
<Select label="Clock change policy" options={[{"id":"reject","label":"Reject ambiguous or missing time"},{"id":"earlier","label":"Earlier instant"},{"id":"later","label":"Later instant"}]} value={resolution} onValueChange={next=>{if(next==='reject'||next==='earlier'||next==='later')setResolution(next);}} />
<Button onPress={resolve}>Resolve session instant</Button>
<Typography role="status">{result}</Typography>
</Stack>
</>
);
}
This repeatable example pins the host reference date to October 16, 2026. Try today, a week from today, two weeks from today, in a month or a week ago. Next/last weekdays are strictly after/before the reference; next month/year preserves the day and clamps at month end. A real host supplies today's civil date in its chosen timezone and pins it for the editing session. Committed values are absolute dates and do not drift.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {DateField} from '@structured-growth/sg-ui/experimental';
import {Box} from '@structured-growth/sg-ui/primitives';
export default function RelativeDateFieldExample() {
// Host-owned civil date. Keep the same anchor for this editing session.
const referenceDate='2026-10-16';
const [date,setDate]=useState<string|null>("2026-10-16");
return (
<>
<ThemeScope density="compact">
<Box style={{inlineSize:'fit-content',maxInlineSize:'min(100%, 22rem)'}}>
<DateField label="Relative appointment date" entryMode="text" referenceDate={referenceDate} value={date} onValueChange={setDate}/>
</Box>
</ThemeScope>
</>
);
}