DatePresetPicker

DatePresetPicker pairs the existing DateRangePicker with a row of canonical presets — Today, Yesterday, Last 7 days, Last 30 days, This month, and Custom. Use it on dashboard filters where most users pick a preset and only a few drop into custom dates.

#Default usage

<DatePresetPicker defaultValue={{ preset: "last7" }} />

#Import

import {
  DatePresetPicker,
  type DatePresetValue,
  resolvePresetRange,
} from "@froggdesign/enter-ui-react";

#Controlled

const [range, setRange] = useState<DatePresetValue>({
  preset: "last30",
  ...resolvePresetRange("last30"),
});

<DatePresetPicker value={range} onValueChange={setRange} />

#Patterns

Override presets to limit or extend the list. Always include id: "custom" if you want users to pick arbitrary ranges.

<DatePresetPicker
  presets={[
    { id: "today", label: "Today" },
    { id: "last7", label: "7d" },
    {
      id: "last14",
      label: "14d",
      range: (reference) => {
        const to = new Date(reference);
        const from = new Date(reference);
        from.setDate(from.getDate() - 13);
        return {
          from: from.toISOString().slice(0, 10),
          to: to.toISOString().slice(0, 10),
        };
      },
    },
    { id: "last30", label: "30d" },
    { id: "custom", label: "Custom" },
  ]}
  onValueChange={onChange}
/>

Each change emits { from, to, preset }. from / to are ISO date strings (YYYY-MM-DD) matching the format used by DateRangePicker.

#Accessibility

The preset row is rendered as a labelled role="group" of toggle buttons with aria-pressed. The custom range delegates to DateRangePicker, which keeps native <input type="date"> semantics.

#API

• value, defaultValue, onValueChange, presets, referenceDate, disabled, invalid, presetGroupLabel.
• Helper export: resolvePresetRange(presetId, referenceDate?) returns { from, to } for a given preset id.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.