{drpFmtMonth(monthDate)}
{['S','M','T','W','T','F','S'].map((d, i) =>
{d}
)}
{cells.map((d, i) => {
if (!d) return
;
const isStart = drpSameDay(d, start);
const isEnd = end && drpSameDay(d, end);
const isHoverEnd = !end && hover && drpSameDay(d, hover);
const between = inRange(d);
const endpoint = isStart || isEnd || isHoverEnd;
return (
onPick(d)}
onMouseEnter={() => onHover(d)}
style={{
position: 'relative',
height: 30,
display: 'flex', alignItems: 'center', justifyContent: 'center',
fontSize: 12,
fontVariantNumeric: 'tabular-nums',
color: endpoint ? 'var(--paper)' : between ? 'var(--ink)' : 'var(--ink-2)',
background: endpoint ? 'var(--terra)' : between ? 'var(--terra-soft)' : 'transparent',
borderRadius: endpoint ? 6 : between ? 0 : 6,
fontWeight: endpoint ? 600 : 500,
cursor: 'pointer',
transition: 'background .12s',
}}
onMouseOver={e => { if (!endpoint && !between) e.currentTarget.style.background = 'var(--cream-2)'; }}
onMouseOut={e => { if (!endpoint && !between) e.currentTarget.style.background = 'transparent'; }}>
{d.getDate()}
);
})}
);
}
function DateRangePicker({ value, onChange, align = 'left' }) {
const today = React.useMemo(() => drpStartOfDay(new Date(2026, 3, 27)), []); // April 27, 2026, matches mock data
const safeValue = value || { preset: 'last30', ...drpResolvePreset('last30', today), compare: false };
const [open, setOpen] = React.useState(false);
const [draft, setDraft] = React.useState(safeValue);
const [hover, setHover] = React.useState(null);
const [pickingEnd, setPickingEnd] = React.useState(false); // true = next click sets end
const [viewMonth, setViewMonth] = React.useState(new Date(today.getFullYear(), today.getMonth() - 1, 1));
const [upToToday, setUpToToday] = React.useState('');
const [upToYesterday, setUpToYesterday] = React.useState('');
const ref = React.useRef(null);
// Reset draft when opening
React.useEffect(() => {
if (open) {
setDraft(safeValue);
setPickingEnd(false);
setHover(null);
setUpToToday(''); setUpToYesterday('');
setViewMonth(new Date(today.getFullYear(), today.getMonth() - 1, 1));
}
}, [open]);
// Click outside
React.useEffect(() => {
if (!open) return;
const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', h);
return () => document.removeEventListener('mousedown', h);
}, [open]);
const triggerLabel = () => {
if (safeValue.preset && safeValue.preset !== 'custom') {
const p = DRP_PRESETS.find(x => x.k === safeValue.preset);
if (p) return p.l;
}
return `${drpFmtShort(safeValue.start)} – ${drpFmtShort(safeValue.end)}`;
};
const pickPreset = (k) => {
if (k === 'custom') { setDraft(d => ({ ...d, preset: 'custom' })); return; }
const r = drpResolvePreset(k, today);
setDraft({ preset: k, start: r.start, end: r.end, compare: draft.compare });
setPickingEnd(false);
setUpToToday(''); setUpToYesterday('');
};
const pickDay = (d) => {
if (!pickingEnd) {
setDraft(x => ({ ...x, preset: 'custom', start: d, end: null }));
setPickingEnd(true);
} else {
// If user clicked before start, swap
if (d < draft.start) {
setDraft(x => ({ ...x, preset: 'custom', start: d, end: x.start }));
} else {
setDraft(x => ({ ...x, preset: 'custom', end: d }));
}
setPickingEnd(false);
}
};
const onUpToToday = (v) => {
setUpToToday(v); setUpToYesterday('');
const n = parseInt(v, 10);
if (!isNaN(n) && n > 0) {
setDraft({ preset: 'custom', start: drpAddDays(today, -(n - 1)), end: today, compare: draft.compare });
}
};
const onUpToYesterday = (v) => {
setUpToYesterday(v); setUpToToday('');
const n = parseInt(v, 10);
if (!isNaN(n) && n > 0) {
const y = drpAddDays(today, -1);
setDraft({ preset: 'custom', start: drpAddDays(y, -(n - 1)), end: y, compare: draft.compare });
}
};
const setStartInput = (s) => {
const d = new Date(s); if (isNaN(d)) return;
setDraft(x => ({ ...x, preset: 'custom', start: drpStartOfDay(d) }));
};
const setEndInput = (s) => {
const d = new Date(s); if (isNaN(d)) return;
setDraft(x => ({ ...x, preset: 'custom', end: drpStartOfDay(d) }));
};
const apply = () => {
if (!draft.end) { window.toast && window.toast('Pick an end date', 'Click a second day to finish the range.', 'info'); return; }
onChange && onChange(draft);
setOpen(false);
};
const toggleCompare = () => {
const next = !draft.compare;
setDraft(x => ({ ...x, compare: next }));
if (next) window.toast && window.toast('Compare mode on', 'Comparing to previous period of equal length.', 'info');
};
const dateInputVal = (d) => d ? `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}` : '';
return (
{open && (
{/* LEFT, presets sidebar */}
{DRP_PRESETS.map(p => (
pickPreset(p.k)}
style={{
padding: '7px 14px', fontSize: 12, cursor: 'pointer',
background: draft.preset === p.k ? 'var(--terra-soft)' : 'transparent',
color: draft.preset === p.k ? 'var(--brand-navy)' : 'var(--ink-2)',
fontWeight: draft.preset === p.k ? 600 : 500,
borderLeft: draft.preset === p.k ? '2px solid var(--terra)' : '2px solid transparent',
}}
onMouseEnter={e => { if (draft.preset !== p.k) e.currentTarget.style.background = 'var(--cream-2)'; }}
onMouseLeave={e => { if (draft.preset !== p.k) e.currentTarget.style.background = 'transparent'; }}>
{p.l}
))}
onUpToToday(e.target.value)} placeholder="N"
style={{ width: 36, padding: '4px 6px', border: '1px solid var(--line)', borderRadius: 5, fontSize: 11, fontFamily: 'inherit', textAlign: 'center', background: 'var(--paper)' }}/>
days up to today
onUpToYesterday(e.target.value)} placeholder="N"
style={{ width: 36, padding: '4px 6px', border: '1px solid var(--line)', borderRadius: 5, fontSize: 11, fontFamily: 'inherit', textAlign: 'center', background: 'var(--paper)' }}/>
days up to yesterday
{/* RIGHT, start/end inputs + 2-month calendar */}
{/* Month nav */}
setHover(null)}>
{/* Footer */}
)}
);
}
window.DateRangePicker = DateRangePicker;
window.DRP_PRESET_LABEL = (k) => (DRP_PRESETS.find(p => p.k === k) || {}).l;