React Date Filter Library (react-date-filter-lib)

A lightweight, modern React date range filter component with quick presets (Today, Yesterday, Last 7 Days, This Month, 6 Months, This Year) and an optional custom date-range picker.

Use it anywhere you need a clean date filter for dashboards, reports, admin panels, and analytics pages.

Features

• Quick presets: Today, Yesterday, Last 7 Days, This Month, 6 Months, This Year, and Custom Date Range.
• Custom date range picker: Two-month calendar view with range selection.
• Nice UX & styles: Clean, modern UI with hover and focus states.
• Simple callback API: Get selected dates in a ['YYYY-MM-DD', 'YYYY-MM-DD'] array.
• Imperative API (via ref):
  • clear() – reset selection.
  • setDates([startDate, endDate]) – set dates programmatically.
• Day.js based: Lightweight date handling using dayjs.

Installation

npm install react-date-filter-lib dayjs react-icons
# or
yarn add react-date-filter-lib dayjs react-icons

Make sure you already have react and react-dom installed (they are peer dependencies).

Basic Usage

import React, { useRef } from "react";
import DateFilter from "react-date-filter-lib";
// or: import { DateFilter } from 'react-date-filter-lib';

function App() {
  const filterRef = useRef(null);

  const handleChange = (dates) => {
    // dates is an array of strings: ['YYYY-MM-DD', 'YYYY-MM-DD']
    console.log("Selected range:", dates);
  };

  const clearFilter = () => {
    filterRef.current?.clear();
  };

  const setLast7Days = () => {
    const start = new Date();
    const end = new Date();
    start.setDate(start.getDate() - 7);
    filterRef.current?.setDates([start, end]);
  };

  return (
    <div>
      <DateFilter ref={filterRef} onChange={handleChange} />

      <button onClick={clearFilter}>Clear</button>
      <button onClick={setLast7Days}>Set Last 7 Days</button>
    </div>
  );
}

export default App;

Props

• onChange?: (dates: string[]) => void
  Called whenever the user selects a range (either a preset or custom range).
  • dates is an array of two strings: ['YYYY-MM-DD', 'YYYY-MM-DD'].
  • For clear() it will receive an empty array [].

Imperative API (via ref)

You can call methods on the component using forwardRef:

const ref = useRef(null);

<DateFilter ref={ref} onChange={handleChange} />;

// Methods:
ref.current.clear(); // Clear selection and close dropdown
ref.current.setDates([start, end]); // Set range with two JS Date objects

• clear()

  • Resets the selected date range.
  • Closes the dropdown.
  • Triggers onChange([]).

• setDates(dates: [Date, Date])

  • Accepts two JavaScript Date objects.
  • Internally converted to dayjs and displayed.

Styling

This library ships with its own CSS via styles.css.

If you consume the package normally, the styles are bundled via Rollup + PostCSS and applied when you import the component.

If you need to override some styles, inspect the following main class names:

• Container & button

  • .date-filter-container
  • .date-filter-button
  • .calendar-icon

• Dropdown & quick ranges

  • .date-filter-dropdown
  • .quick-ranges-panel
  • .quick-range-item

• Calendar

  • .custom-calendar
  • .calendar-months-container
  • .calendar-month
  • .calendar-day, .today, .disabled, .in-range, .range-start, .range-end

You can override these classes in your own CSS for custom branding.

When this library is helpful

• Dashboards & analytics: Quickly filter charts and tables by fixed ranges (e.g. Last 7 Days) or custom ranges.
• Admin panels: Filter user activity, orders, logs, etc.
• Reports: Allow end-users to easily pick relevant date scopes.

Instead of re-building this date filter logic and styling every time, you can drop in DateFilter and focus on your data and logic.

Requirements

• React: ^18 or ^19
• React DOM: ^18 or ^19
• Node / bundler: Any modern bundler that supports ES modules.

Author

Aryan Patel

License

ISC