Date Range Picker

A date range selector with preset options (Today, Last 7 days, Last 30 days) and a custom date input. Used in dashboard filter bars, report pages, and analytics.

Components used

Button · Select · Input · FilterBar

Preview · Date Range Picker

Code

HTML · @primus/ui-core

<!-- Preset range button group -->
<div>
  <p style="font-size:0.75rem;font-weight:600;text-transform:uppercase;
    letter-spacing:0.06em;color:var(--muted-foreground);margin:0 0 0.5rem">
    Date range
  </p>
  <div style="display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden">
    <button class="ghost small" style="flex:1;border-radius:0;border-right:1px solid var(--border)">
      Today
    </button>
    <button class="ghost small" style="flex:1;border-radius:0;border-right:1px solid var(--border);
      background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary);font-weight:600">
      Last 7 days
    </button>
    <button class="ghost small" style="flex:1;border-radius:0;border-right:1px solid var(--border)">
      Last 30 days
    </button>
    <button class="ghost small" style="flex:1;border-radius:0">Custom</button>
  </div>
</div>

<!-- Custom range inputs (show when "Custom" selected) -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-top:0.75rem">
  <label data-field>
    Start date
    <input type="date" />
  </label>
  <label data-field>
    End date
    <input type="date" />
  </label>
</div>

React

import { PrimusDateRangePicker } from 'primus-react-ui';
import { useState } from 'react';

export function ReportFilters() {
  const [range, setRange] = useState({
    preset: 'Last 7 days',
    start: null,
    end: null,
  });

  return (
    <PrimusDateRangePicker
      ranges={['Today', 'Last 7 days', 'Last 30 days', 'Last 90 days', 'Custom']}
      defaultRange="Last 7 days"
      min="2024-01-01"
      startDate={range.start}
      endDate={range.end}
      onRangeChange={({ preset, start, end }) => {
        setRange({ preset, start, end });
        loadReport({ start, end });
      }}
    />
  );
}

Angular

<!-- report-filters.component.html -->
<primus-date-range-picker
  [ranges]="dateRanges"
  defaultRange="Last 7 days"
  [startDate]="startDate"
  [endDate]="endDate"
  min="2024-01-01"
  (onRangeChange)="onRangeChange($event)">
</primus-date-range-picker>

// report-filters.component.ts
import { Component } from '@angular/core';
import { ReportService } from './report.service';

@Component({ templateUrl: './report-filters.component.html' })
export class ReportFiltersComponent {
  dateRanges = ['Today', 'Last 7 days', 'Last 30 days', 'Last 90 days', 'Custom'];
  startDate: string | null = null;
  endDate:   string | null = null;

  constructor(private reportSvc: ReportService) {}

  onRangeChange(event: { preset: string; start: string; end: string }) {
    this.startDate = event.start;
    this.endDate   = event.end;
    this.reportSvc.load({ start: event.start, end: event.end });
  }
}

Props

Prop	Type	Default	Description
ranges	string[]	['Today', 'Last 7 days', 'Last 30 days']	Preset range labels. Include 'Custom' to show date inputs
defaultRange	string	'Last 7 days'	Initially selected preset
startDate	string | null	null	Controlled start date (YYYY-MM-DD)
endDate	string | null	null	Controlled end date (YYYY-MM-DD)
min	string	—	Minimum selectable date
max	string	—	Maximum selectable date (defaults to today)
disabled	boolean	false	Disable the picker
onRangeChange / (onRangeChange)	(event) => void	—	Emits { preset, start, end } on change

Range change event

interface DateRangeChangeEvent {
  preset: string;          // e.g. 'Last 7 days' or 'Custom'
  start:  string | null;   // ISO date: '2026-02-01'
  end:    string | null;   // ISO date: '2026-03-03'
}

Version history

See the Changelog for version history and breaking changes.