@raihan004/date-range-picker

Reusable React date range picker and date filtering helpers for Cart Suite apps.

The package is framework-agnostic React. It does not depend on Remix, React Router, Shopify App Bridge, or Polaris. Shopify apps can still render Polaris web component triggers through renderTrigger.

Install

npm install @raihan004/date-range-picker

Import the package styles once in your app route or root:

import "@raihan004/date-range-picker/styles.css";

For Vite or React Router route links, you can also import the CSS URL:

import dateRangePickerStylesUrl from "@raihan004/date-range-picker/styles.css?url";

Basic Usage

import {
  DateRangePicker,
  getDefaultRange,
  serializeDateRange,
  type DateRange,
} from "@raihan004/date-range-picker";
import { useState } from "react";

export function ReportDateFilter() {
  const [range, setRange] = useState<DateRange>(() => getDefaultRange());

  return (
    <DateRangePicker
      value={range}
      onApply={({ range }) => {
        setRange(range);
        console.log(serializeDateRange(range));
      }}
    />
  );
}

Shopify Polaris Trigger

<DateRangePicker
  value={range}
  onChange={setRange}
  renderTrigger={({ label, toggle, isOpen }) => (
    <s-button
      variant="secondary"
      icon="calendar"
      onClick={toggle}
      accessibilityLabel={
        isOpen ? "Close date range picker" : "Open date range picker"
      }
    >
      {label}
    </s-button>
  )}
/>

Server or URL Filtering

import {
  deserializeDateRange,
  serializeDateRange,
} from "@raihan004/date-range-picker";

const range = deserializeDateRange(
  url.searchParams.get("startDate"),
  url.searchParams.get("endDate"),
);

const params = serializeDateRange(range);

Client-Side Filtering

import { filterByDateRange } from "@raihan004/date-range-picker";

const rowsInRange = filterByDateRange(rows, {
  range,
  getDate: (row) => row.createdAt,
});

API

Components

• DateRangePicker

Events

• onChange(range)
• onApply({ range, preset })
• onCancel()
• onDraftChange(range)
• onOpenChange(isOpen)
• onPresetSelect({ preset, range })

Helpers

• getDefaultRange
• getPresetRange
• detectPreset
• serializeDateRange
• deserializeDateRange
• formatDateRange
• formatIsoDate
• parseIsoDate
• filterByDateRange
• getPreviousPeriod

Publish

Build and inspect before publishing:

npm run build
npm pack --dry-run

Publish a public scoped package:

npm publish --access public

Before the first public publish, choose the final package name, npm scope, and license.