SGUI / Development
PeriodPicker
Select a whole week, month, quarter or year.
Loading examples…
Loading examples…
Examples
Loading examples…
Used In
No direct parents in the documented component catalog.
Component documentation
SGUI / Development
Select a whole week, month, quarter or year.
Loading examples…
Loading examples…
Loading examples…
No direct parents in the documented component catalog.
Select a whole calendar period. The result is an inclusive civil-date range.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {PeriodPicker,type DateRange} from '@structured-growth/sg-ui/experimental';
export default function PeriodPickerExample() {
const [value,setValue]=useState<DateRange|null>(null);
return (
<>
<ThemeScope density="comfortable">
<PeriodPicker descriptionPlacement="above" errorPlacement="below" label={"Reporting period"} presentation="auto" disabled={false} readOnly={false} required={false} unit="month" display="popup" purpose="selection" yearNavigation="scroll" yearEntry="text" referenceDate="2026-10-16" value={value} onValueChange={setValue}/>
</ThemeScope>
</>
);
}
Select a whole calendar period. The result is an inclusive civil-date range.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {PeriodPicker,type DateRange} from '@structured-growth/sg-ui/experimental';
export default function PeriodPickerExample() {
const [value,setValue]=useState<DateRange|null>(null);
return (
<>
<ThemeScope density="compact">
<PeriodPicker descriptionPlacement="above" errorPlacement="below" label={"Reporting period"} presentation="auto" disabled={false} readOnly={false} required={false} unit="month" display="popup" purpose="selection" yearNavigation="scroll" yearEntry="text" referenceDate="2026-10-16" value={value} onValueChange={setValue}/>
</ThemeScope>
</>
);
}
Select a whole calendar period. The result is an inclusive civil-date range.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {PeriodPicker,type DateRange} from '@structured-growth/sg-ui/experimental';
export default function PeriodPickerExample() {
const [value,setValue]=useState<DateRange|null>(null);
return (
<>
<ThemeScope density="comfortable">
<PeriodPicker descriptionPlacement="above" errorPlacement="below" label={"Reporting period"} presentation="auto" disabled={false} readOnly={false} required={false} unit="month" display="popup" purpose="selection" yearNavigation="scroll" yearEntry="text" referenceDate="2026-10-16" value={value} onValueChange={setValue}/>
</ThemeScope>
</>
);
}
Select a whole calendar period. The result is an inclusive civil-date range.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {PeriodPicker,type DateRange} from '@structured-growth/sg-ui/experimental';
export default function PeriodPickerExample() {
const [value,setValue]=useState<DateRange|null>(null);
return (
<>
<ThemeScope density="compact">
<PeriodPicker descriptionPlacement="above" errorPlacement="below" label={"Reporting period"} presentation="auto" disabled={false} readOnly={false} required={false} unit="week" display="popup" purpose="selection" yearNavigation="scroll" yearEntry="text" referenceDate="2026-10-16" value={value} onValueChange={setValue}/>
</ThemeScope>
</>
);
}
Select a whole calendar period. The result is an inclusive civil-date range.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {PeriodPicker,type DateRange} from '@structured-growth/sg-ui/experimental';
export default function PeriodPickerExample() {
const [value,setValue]=useState<DateRange|null>(null);
return (
<>
<ThemeScope density="compact">
<PeriodPicker descriptionPlacement="above" errorPlacement="below" label={"Reporting period"} presentation="auto" disabled={false} readOnly={false} required={false} unit="quarter" display="popup" purpose="selection" yearNavigation="scroll" yearEntry="text" referenceDate="2026-10-16" value={value} onValueChange={setValue}/>
</ThemeScope>
</>
);
}
Select a whole calendar period. The result is an inclusive civil-date range.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {PeriodPicker,type DateRange} from '@structured-growth/sg-ui/experimental';
export default function PeriodPickerExample() {
const [value,setValue]=useState<DateRange|null>(null);
return (
<>
<ThemeScope density="compact">
<PeriodPicker descriptionPlacement="above" errorPlacement="below" label={"Reporting period"} presentation="auto" disabled={false} readOnly={false} required={false} unit="year" display="popup" purpose="selection" yearNavigation="scroll" yearEntry="text" referenceDate="2026-10-16" value={value} onValueChange={setValue}/>
</ThemeScope>
</>
);
}