DateRangePicker

Calendar popover that lets user pick date ranges.

Want to skip the docs? Try our MCP Server

#
Documentation

#
Usage


import {
  DateRangePicker,
  DateRangePickerContent,
  DateRangePickerTrigger,
} from "@optiaxiom/react";
 
export function App() {
  return (
    <DateRangePicker>
      <DateRangePickerTrigger w="224" />
      <DateRangePickerContent />
    </DateRangePicker>
  );
}

#
Anatomy


import {
  DateRangePicker,
  DateRangePickerContent,
  DateRangePickerTrigger,
} from "@optiaxiom/react";
 
export default () => (
  <DateRangePicker>
    <DateRangePickerTrigger />
    <DateRangePickerContent />
  </DateRangePicker>
);

#
Controlled

Use the value and defaultValue props to toggle between controlled and uncontrolled usage. And combine it with onValueChange to listen for changes to the state.

Selected: June 6 – 15, 2025


"use client";
 
import {
  DateRangePicker,
  DateRangePickerContent,
  DateRangePickerTrigger,
  Group,
  Text,
} from "@optiaxiom/react";
import { useState } from "react";
 
const formatter = new Intl.DateTimeFormat(undefined, { dateStyle: "long" });
 
export function App() {
  const [value, setValue] = useState<null | { from: Date; to: Date }>({
    from: new Date("2025-06-06T00:00"),
    to: new Date("2025-06-15T23:59"),
  });
 
  return (
    <Group flexDirection="column" gap="16">
      <DateRangePicker onValueChange={setValue} value={value}>
        <DateRangePickerTrigger w="224" />
        <DateRangePickerContent />
      </DateRangePicker>
      <Text fontSize="md">
        Selected: {value && formatter.formatRange(value.from, value.to)}
      </Text>
    </Group>
  );
}

#
Addons

Use the addonBefore and addonAfter prop on DateRangePickerContent to add content to either side of the calendar.

App.tsx


"use client";
 
import {
  DateRangePicker,
  DateRangePickerContent,
  DateRangePickerTrigger,
  SegmentedControl,
  SegmentedControlItem,
} from "@optiaxiom/react";
import { useState } from "react";
 
import { presetToRange } from "./presetToRange";
 
export function App() {
  const [preset, setPreset] = useState("custom");
  const [value, setValue] = useState<null | { from: Date; to: Date }>(null);
 
  return (
    <DateRangePicker
      onValueChange={(value) => {
        setPreset("custom");
        setValue(value);
      }}
      value={value}
    >
      <DateRangePickerTrigger w="224" />
      <DateRangePickerContent
        addonBefore={
          <SegmentedControl
            flexDirection="column"
            gap="2"
            mr="8"
            onValueChange={(preset: string) => {
              if (!preset || preset === "custom") {
                return;
              }
 
              setPreset(preset);
              setValue(presetToRange(preset));
            }}
            value={preset}
          >
            <SegmentedControlItem value="today">Today</SegmentedControlItem>
            <SegmentedControlItem value="week">This week</SegmentedControlItem>
            <SegmentedControlItem value="month">
              This month
            </SegmentedControlItem>
            <SegmentedControlItem value="next-week">
              Next week
            </SegmentedControlItem>
            <SegmentedControlItem value="next-month">
              Next month
            </SegmentedControlItem>
            <SegmentedControlItem value="custom">Custom</SegmentedControlItem>
          </SegmentedControl>
        }
      />
    </DateRangePicker>
  );
}

The calendar is localized to the browser locale (via navigator.language) by default, which controls the captions, weekday headers, week start, and range text. Override the locale for the whole app by passing the locale prop to AxiomProvider.

#
Props