TimeFrame
Advanced date picker family with preset sidebar, compare mode, market event presets, and a standalone mini calendar. The HybridDatePicker is the main component;MiniCalendar, ExpandableChip, and MarketPresetRow are composable sub-components.
Click the date chip to open the full date picker with preset sidebar, calendar, and market event tabs. The component is fully controlled via props.
Compare Mode
Enable compare mode to select multiple date ranges for side-by-side analysis. The picker supports up to 3 named ranges (A, B, C) with independent preset selection.
Market Event Presets
Market events appear as selectable presets in the date picker's Markets tab. Both built-in and custom market events are supported. The MarketPresetRow sub-component renders each market event.
Atlanta Market
NY Now Spring
MiniCalendar Standalone
The MiniCalendar is used inside HybridDatePicker but can also be rendered standalone. It supports range selection, market date dot indicators, and multiple size presets.
October 2026
Sub-components
ExpandableChip
Hover-expand preset group chip with pinning functionality. Used in the preset sidebar to show rolling and period preset groups.
Usage
import { HybridDatePicker, MiniCalendar } from '@so.boss/gloss-ui';
import type { DateChangePayload, DatePreferences } from '@so.boss/gloss-ui';
// Full date picker with presets and compare mode
<HybridDatePicker
value={dateRange}
onChange={(payload: DateChangePayload) => {
if (Array.isArray(payload)) {
setDateRange(payload);
} else {
setCompareValue(payload);
}
}}
preferences={preferences}
onPreferenceChange={setPreferences}
markets={marketPresets}
customMarkets={customMarkets}
compareEnabled={isComparing}
onCompareToggle={setIsComparing}
enableCompare
calendarSize="medium"
/>
// Standalone calendar for simple date selection
<MiniCalendar
selectedStart={startDate}
selectedEnd={endDate}
onSelect={(start, end) => {
setStartDate(start);
setEndDate(end);
}}
size="medium"
/>