DatePickerAdvanced

Inline calendar with optional date summary rows, time pickers, and toggles. Month and year grids keep a stable height; use Back in the header to return to the day grid.

import { DatePickerAdvanced } from 'phoundry-ui';

Notion-style toggles

End date, include time, and clear — controlled via bindable value. Week starts on Monday.

Select date

End date

Include time

Date: none

Show code

let dateValue = $state<DatePickerAdvancedValue>({
	startDate: null,
	endDate: null,
	includeTime: false,
	includeEndDate: false
});

<DatePickerAdvanced
  bind:value={dateValue}
  weekStartsOn={1}
/>

Compact calendar (no toggles)

Matches the internal panel used by DatePicker — only the grid + navigation chrome.

Show code

<DatePickerAdvanced
  bind:value={compactValue}
  showToggles={false}
  minDate={advMin}
  maxDate={advMax}
/>

Disabled

2026/05/15

End date

Include time

Show code

<DatePickerAdvanced bind:value={locked} disabled />

DatePickerAdvanced props

Prop	Type	Default	Description
value	DatePickerAdvancedValue	—	Bindable structured value (start/end, include toggles).
onchange	(type: DatePickerChangeType, value: DatePickerAdvancedValue) => void	—	Optional lifecycle hook — useful for analytics; state still updates via `bind:value`.
minDate	Date	—	Earliest selectable date.
maxDate	Date	—	Latest selectable date.
disabled	boolean	false	Disable the picker.
weekStartsOn	0 \| 1	0	First day of week: 0 = Sunday, 1 = Monday.
showToggles	boolean	true	Show date rows + Notion-style toggles (End date, Include time, Clear).
class	string	—	Additional CSS classes.

Usage tips

Use minDate and maxDate to constrain selectable dates.
In range mode (when includeEndDate is true), the first click sets the start and the second click sets the end.
Use DatePickerAdvanced with showToggles={false} for a compact calendar (same layout DatePicker uses internally).
Set weekStartsOn={1} for Monday-first calendars (ISO standard).