react-lite-daterange

A lightweight React date range picker for dashboards, forms, and admin panels.

• Zero runtime dependencies
• Controlled and uncontrolled usage
• Built-in shortcuts
• Custom shortcut labels
• Min/max date support
• Custom disabled dates
• Locale-aware display formatting
• TypeScript support
• Easy to style

Why choose react-lite-daterange?

react-lite-daterange is built for apps that need a simple, lightweight, customizable date range picker without pulling in a large dependency tree.

It works well for:

• admin dashboards
• order filters
• booking forms
• reporting interfaces
• analytics date ranges

Best for

• Admin dashboard filters
• Order and invoice date ranges
• Booking and reservation forms
• Internal tools
• Lightweight React apps

Features

• Date range selection
• 1 to 4 month calendar views
• Built-in shortcuts
• Custom shortcuts
• Custom shortcut labels
• Enable or disable shortcut groups
• Controlled and uncontrolled usage
• Min/max date support
• Custom disabled dates
• Locale-aware display formatting
• Custom week start
• Clearable input
• TypeScript types included
• Easy to style
• Zero runtime dependencies

Common use cases

• Filter orders by date range
• Search invoices by billing period
• Select booking or reservation dates
• Power analytics dashboards
• Build internal admin panels

When this package may not be the best fit

This package is optimized for lightweight date range selection in React apps.

You may want a different solution if you need:

• time picking
• highly complex scheduling
• mobile-native date pickers
• full booking calendar workflows

Why use this instead of a heavier picker?

Choose react-lite-daterange when you want:

• a small API surface
• zero runtime dependencies
• easy styling
• a date range picker focused on filters, forms, and dashboards

Installation

npm install react-lite-daterange

Basic usage

import { useState } from "react";
import { DateRangeInput, type DateRange } from "react-lite-daterange";

export default function App() {
  const [range, setRange] = useState<DateRange>({
    start: null,
    end: null,
  });

  return (
    <DateRangeInput
      value={range}
      onChange={setRange}
      locale="de-DE"
      weekStartsOn={1}
      numberOfMonths={2}
      placeholder="Select date range"
      clearable
    />
  );
}

Controlled usage

import { useState } from "react";
import { DateRangeInput, type DateRange } from "react-lite-daterange";

export default function ControlledExample() {
  const [range, setRange] = useState<DateRange>({
    start: new Date(),
    end: null,
  });

  return (
    <DateRangeInput
      value={range}
      onChange={setRange}
      numberOfMonths={2}
      clearable
    />
  );
}

Uncontrolled usage

import { DateRangeInput } from "react-lite-daterange";

export default function UncontrolledExample() {
  return (
    <DateRangeInput
      defaultValue={{
        start: new Date(),
        end: null,
      }}
      numberOfMonths={2}
      clearable
    />
  );
}

With shortcuts

import { DateRangeInput } from "react-lite-daterange";

export default function ShortcutsExample() {
  return (
    <DateRangeInput
      numberOfMonths={2}
      showShortcuts
      shortcutPosition="left"
      enabledShortcutIds={["today", "last7", "last30", "thisMonth"]}
    />
  );
}

Rename default shortcut labels

Use shortcutLabels to translate or rename built-in shortcut labels without rewriting the shortcut logic.

import { DateRangeInput } from "react-lite-daterange";

export default function ShortcutLabelsExample() {
  return (
    <DateRangeInput
      shortcutLabels={{
        today: "Heute",
        yesterday: "Gestern",
        last7: "Letzte 7 Tage",
        last30: "Letzte 30 Tage",
        thisMonth: "Dieser Monat",
        lastMonth: "Letzter Monat",
        ytd: "Jahr bis heute",
      }}
    />
  );
}

Custom UI labels

Use labels to customize built-in UI text such as the close button, placeholder, aria labels, and calendar navigation labels.

import { DateRangeInput } from "react-lite-daterange";

export default function LabelsExample() {
  return (
    <DateRangeInput
      locale="de-DE"
      labels={{
        closeButton: "Schließen",
        selectionEmpty: "Start- und Enddatum auswählen",
        selectionStart: "Start:",
        previousMonth: "Vorheriger Monat",
        nextMonth: "Nächster Monat",
        inputAriaLabel: "Datumsbereich",
        openCalendarAriaLabel: "Kalender öffnen",
        clearDateRangeAriaLabel: "Datumsbereich löschen",
        dialogAriaLabel: "Datumsbereichsauswahl",
        placeholder: "TT/MM/JJJJ – TT/MM/JJJJ",
      }}
    />
  );
}

With custom disabled dates

import { DateRangeInput } from "react-lite-daterange";

export default function DisabledDatesExample() {
  return (
    <DateRangeInput
      isDateDisabled={(date) => {
        const day = date.getDay();
        return day === 0 || day === 6;
      }}
      numberOfMonths={2}
    />
  );
}

With min and max dates

import { DateRangeInput } from "react-lite-daterange";

export default function MinMaxExample() {
  return (
    <DateRangeInput
      minDate={new Date(2025, 0, 1)}
      maxDate={new Date(2025, 11, 31)}
      numberOfMonths={2}
    />
  );
}

Props

| Prop | Type | Description | | --------------------- | -------------------------------------------- | ------------------------------------------ | | value | DateRange | Controlled value | | defaultValue | DateRange | Initial uncontrolled value | | onChange | (range: DateRange) => void | Called when the selected range changes | | locale | string | Locale used for display formatting | | weekStartsOn | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 | First day of the week | | numberOfMonths | 1 \| 2 \| 3 \| 4 | Number of visible calendar months | | minDate | Date | Minimum selectable date | | maxDate | Date | Maximum selectable date | | isDateDisabled | (date: Date) => boolean | Disable specific dates | | shortcuts | Shortcut[] | Custom shortcuts | | shortcutLabels | Partial<Record<string, string>> | Rename shortcut labels by shortcut id | | enabledShortcutIds | string[] | Restrict visible shortcuts to selected ids | | disabledShortcutIds | string[] | Hide specific shortcut ids | | showShortcuts | boolean | Show or hide shortcuts panel | | shortcutPosition | "top" \| "bottom" \| "left" \| "right" | Shortcuts layout position | | size | "small" \| "medium" \| "large" \| "xlarge" | Input size | | placeholder | string | Custom placeholder text | | formatOptions | Intl.DateTimeFormatOptions | Formatting options for displayed dates | | clearable | boolean | Show clear action | | labels | DateRangePickerLabels | Custom built-in UI labels |

Default shortcut ids

The built-in shortcut ids are:

• today
• yesterday
• last7
• last30
• thisMonth
• lastMonth
• ytd

Use these ids with enabledShortcutIds, disabledShortcutIds, or shortcutLabels.

Typed input format

By default, typed input follows the MM/DD/YYYY – MM/DD/YYYY pattern.

Displayed dates are formatted using the provided locale and Intl.DateTimeFormat.

Styling

react-lite-daterange includes default styles out of the box.

You can also override the default styles in your own CSS to match your app or design system.

Accessibility

react-lite-daterange is designed to be simple and easy to integrate into desktop-first business apps, dashboards, and internal tools.

If accessibility is a priority for your project, document your supported keyboard interactions and test with screen readers before production use.

License

MIT