SGUI / Development
DateTimeRangePicker
Local start/end datetime drafting with minute increments and atomic Apply.
Loading examples…
Loading examples…
Examples
Loading examples…
Used In
No direct parents in the documented component catalog.
Component documentation
SGUI / Development
Local start/end datetime drafting with minute increments and atomic Apply.
Loading examples…
Loading examples…
Loading examples…
No direct parents in the documented component catalog.
Independent start/end dates and flexible time text with dropdown increments. Apply commits the whole local interval; the host owns timezone conversion.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {DateTimeRangePicker,type DateTimeRange} from '@structured-growth/sg-ui/experimental';
export default function DateTimeRangePickerExample() {
const [value,setValue]=useState<DateTimeRange|null>({"start":"2026-10-07T08:00:00","end":"2026-10-07T09:00:00"});
return (
<>
<ThemeScope density="comfortable">
<DateTimeRangePicker descriptionPlacement="above" errorPlacement="below" label={"Meeting interval"} presentation="auto" disabled={false} readOnly={false} required={false} minuteStep={15} hourCycle={24} referenceDate="2026-10-16" value={value} onValueChange={setValue}/>
</ThemeScope>
</>
);
}
Independent start/end dates and flexible time text with dropdown increments. Apply commits the whole local interval; the host owns timezone conversion.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {DateTimeRangePicker,type DateTimeRange} from '@structured-growth/sg-ui/experimental';
export default function DateTimeRangePickerExample() {
const [value,setValue]=useState<DateTimeRange|null>({"start":"2026-10-07T08:00:00","end":"2026-10-07T09:00:00"});
return (
<>
<ThemeScope density="compact">
<DateTimeRangePicker descriptionPlacement="above" errorPlacement="below" label={"Meeting interval"} presentation="auto" disabled={false} readOnly={false} required={false} minuteStep={15} hourCycle={24} referenceDate="2026-10-16" value={value} onValueChange={setValue}/>
</ThemeScope>
</>
);
}
Independent start/end dates and flexible time text with dropdown increments. Apply commits the whole local interval; the host owns timezone conversion.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {DateTimeRangePicker,type DateTimeRange} from '@structured-growth/sg-ui/experimental';
export default function DateTimeRangePickerExample() {
const [value,setValue]=useState<DateTimeRange|null>({"start":"2026-10-07T08:00:00","end":"2026-10-07T09:00:00"});
return (
<>
<ThemeScope density="comfortable">
<DateTimeRangePicker descriptionPlacement="above" errorPlacement="below" label={"Meeting interval"} presentation="auto" disabled={false} readOnly={false} required={false} minuteStep={15} hourCycle={24} referenceDate="2026-10-16" value={value} onValueChange={setValue}/>
</ThemeScope>
</>
);
}