Component documentation
SGUI / Development
Compare a primary interval with a previous period, previous year or custom range.
Loading examples…
Loading examples…
Loading examples…
No direct parents in the documented component catalog.
Compare with the adjacent equal-length previous period, the previous calendar year (month-end clamped), or a custom range. Apply commits the pair atomically.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {DateRangeComparisonPicker,type DateRangeComparison} from '@structured-growth/sg-ui/experimental';
export default function DateRangeComparisonPickerExample() {
const [value,setValue]=useState<DateRangeComparison|null>({"primary":{"start":"2026-10-07","end":"2026-10-16"},"comparison":{"start":"2026-09-27","end":"2026-10-06"},"mode":"previous-period"});
return (
<>
<ThemeScope density="comfortable">
<DateRangeComparisonPicker descriptionPlacement="above" errorPlacement="below" label={"Compare reporting periods"} presentation="auto" disabled={false} readOnly={false} required={false} value={value} onValueChange={setValue}/>
</ThemeScope>
</>
);
}
Compare with the adjacent equal-length previous period, the previous calendar year (month-end clamped), or a custom range. Apply commits the pair atomically.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {DateRangeComparisonPicker,type DateRangeComparison} from '@structured-growth/sg-ui/experimental';
export default function DateRangeComparisonPickerExample() {
const [value,setValue]=useState<DateRangeComparison|null>({"primary":{"start":"2026-10-07","end":"2026-10-16"},"comparison":{"start":"2026-09-27","end":"2026-10-06"},"mode":"previous-period"});
return (
<>
<ThemeScope density="compact">
<DateRangeComparisonPicker descriptionPlacement="above" errorPlacement="below" label={"Compare reporting periods"} presentation="auto" disabled={false} readOnly={false} required={false} value={value} onValueChange={setValue}/>
</ThemeScope>
</>
);
}
Compare with the adjacent equal-length previous period, the previous calendar year (month-end clamped), or a custom range. Apply commits the pair atomically.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {DateRangeComparisonPicker,type DateRangeComparison} from '@structured-growth/sg-ui/experimental';
export default function DateRangeComparisonPickerExample() {
const [value,setValue]=useState<DateRangeComparison|null>({"primary":{"start":"2026-10-07","end":"2026-10-16"},"comparison":{"start":"2026-09-27","end":"2026-10-06"},"mode":"previous-period"});
return (
<>
<ThemeScope density="comfortable">
<DateRangeComparisonPicker descriptionPlacement="above" errorPlacement="below" label={"Compare reporting periods"} presentation="auto" disabled={false} readOnly={false} required={false} value={value} onValueChange={setValue}/>
</ThemeScope>
</>
);
}