Date Range Filter

Dashboard-wide time range.

html

<form class="drfilter drfilter--30d " style="--c:#BFD9F2;">
  <span class="drfilter__preset"></span>
  <label class="drfilter__field">
    <span class="drfilter__label">From</span>
    <input type="date" class="drfilter__input" value="2026-07-19">
  </label>
  <label class="drfilter__field">
    <span class="drfilter__label">To</span>
    <input type="date" class="drfilter__input" value="2026-08-18">
  </label>
</form>
<style>
.drfilter { display: flex; align-items: end; gap: 10px; font: 13px system-ui, sans-serif; color: #241430; flex-wrap: wrap; }
.drfilter__preset { font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--c); order: -1; align-self: center; }
.drfilter--today .drfilter__preset::before { content: "Today"; }
.drfilter--7d .drfilter__preset::before { content: "Last 7 days"; }
.drfilter--30d .drfilter__preset::before { content: "Last 30 days"; }
.drfilter--custom .drfilter__preset::before { content: "Custom range"; }
.drfilter--custom .drfilter__field { display: flex; }
.drfilter__field { display: flex; flex-direction: column; gap: 3px; font-size: 11px; }
.drfilter--today .drfilter__field, .drfilter--7d .drfilter__field, .drfilter--30d .drfilter__field { opacity: .5; }
.drfilter__input { border: 1.5px solid var(--c); border-radius: 6px; padding: 5px 6px; font: inherit; background: #FAF7F2; color: #241430; }
.drfilter__input:focus-visible { outline: 2px solid var(--c); }
.drfilter--compact { gap: 6px; }
.drfilter--compact .drfilter__field { display: none; }
</style>

tailwind

<form class="drfilter-tw drfilter-tw--30d  flex items-end gap-2.5 flex-wrap font-sans text-[13px] text-[#241430]" style="--c:#BFD9F2;">
  <span class="drfilter-tw__preset order-first self-center text-[11px] font-bold uppercase px-2 py-0.5 rounded-full" style="background:var(--c);"></span>
  <label class="drfilter-tw__field flex flex-col gap-0.5 text-[11px]">
    <span>From</span>
    <input type="date" class="border-[1.5px] rounded-md px-1.5 py-1 bg-[#FAF7F2] text-[#241430]" style="border-color:var(--c);" value="2026-07-19">
  </label>
  <label class="drfilter-tw__field flex flex-col gap-0.5 text-[11px]">
    <span>To</span>
    <input type="date" class="border-[1.5px] rounded-md px-1.5 py-1 bg-[#FAF7F2] text-[#241430]" style="border-color:var(--c);" value="2026-08-18">
  </label>
</form>
<style>
.drfilter-tw--today .drfilter-tw__preset::before { content: "Today"; }
.drfilter-tw--7d .drfilter-tw__preset::before { content: "Last 7 days"; }
.drfilter-tw--30d .drfilter-tw__preset::before { content: "Last 30 days"; }
.drfilter-tw--custom .drfilter-tw__preset::before { content: "Custom range"; }
.drfilter-tw--today .drfilter-tw__field, .drfilter-tw--7d .drfilter-tw__field, .drfilter-tw--30d .drfilter-tw__field { opacity: .5; }
.drfilter-tw--compact .drfilter-tw__field { display: none; }
</style>

react

export function DateRangeFilter({
  startDate = "2026-07-19",
  endDate = "2026-08-18",
  preset = "30d",
  color = "#BFD9F2",
  compact = false,
}) {
  const presetLabel = { today: "Today", "7d": "Last 7 days", "30d": "Last 30 days", custom: "Custom range" }[preset] ?? "Today";
  const showFields = !compact;
  const fieldOpacity = preset === "custom" ? 1 : 0.5;
  return (
    <form style={{ display: "flex", alignItems: "flex-end", gap: compact ? 6 : 10, flexWrap: "wrap", font: "13px system-ui, sans-serif", color: "#241430" }}>
      <span style={{ order: -1, alignSelf: "center", fontSize: 11, fontWeight: 700, textTransform: "uppercase", padding: "3px 8px", borderRadius: 999, background: color }}>{presetLabel}</span>
      {showFields && (
        <>
          <label style={{ display: "flex", flexDirection: "column", gap: 3, fontSize: 11, opacity: fieldOpacity }}>
            <span>From</span>
            <input type="date" defaultValue={startDate} style={{ border: `1.5px solid ${color}`, borderRadius: 6, padding: "5px 6px", background: "#FAF7F2", color: "#241430" }} />
          </label>
          <label style={{ display: "flex", flexDirection: "column", gap: 3, fontSize: 11, opacity: fieldOpacity }}>
            <span>To</span>
            <input type="date" defaultValue={endDate} style={{ border: `1.5px solid ${color}`, borderRadius: 6, padding: "5px 6px", background: "#FAF7F2", color: "#241430" }} />
          </label>
        </>
      )}
    </form>
  );
}