Fluxo UIFluxo UIv0.4.1

DateRangePicker

A component for selecting date ranges with calendar interface and customizable formatting.

Basic Usage

Basic Date Range Picker

Simple date range selection

With Preset Dates

With Preset Dates

Date range picker with preset values

Quick Select Ranges

With Quick Select Ranges

Date range picker with predefined quick ranges

import { DateRangePicker } from 'fluxo-ui';
import { useState } from 'react';

function MyComponent() {
  const [dateRange, setDateRange] = useState<[Date, Date]>([new Date(), new Date()]);

  const quickRanges = [
    {
      value: 'today',
      label: 'Today',
      range: [new Date(), new Date()] as [Date, Date],
    },
    {
      value: 'last7days',
      label: 'Last 7 Days',
      range: [
        new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
        new Date(),
      ] as [Date, Date],
    },
    {
      value: 'last30days',
      label: 'Last 30 Days',
      range: [
        new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
        new Date(),
      ] as [Date, Date],
    },
  ];

  return (
    <DateRangePicker
      value={dateRange}
      ranges={quickRanges}
      onChange={(selection) => setDateRange(selection.value)}
      onClose={() => console.log('Picker closed')}
    />
  );
}

Custom Format

Custom Format

Custom date format and separator

Constraints

With Constraints

Limited to future dates only

Today Button

With Today Button

Date range picker with today button and custom label

Popover Position

Popover Position — Top

Picker opens upward using topStart position

Disabled State

Disabled State

DateRangePicker in disabled state

Single Date Selection

Single Date Selection

Set range={false} to select a single date instead of a range. The picker closes immediately on selection.

Single Date
<DateRangePicker
  range={false}
  placeholder="Pick a date..."
  onChange={(sel) => {
    // sel.value is [Date, Date] where both are the same
    const selectedDate = sel.value[0];
    console.log(selectedDate);
  }}
/>

Selection Modes

Selection Modes

Control what unit is selected: day (default), week, month, or year.

None selected

None selected

None selected

None selected

Selection Modes
<DateRangePicker
  selectionMode="week"
  range={false}
  firstDayOfWeek={1}
  onChange={(sel) => console.log(sel.value)}
/>

<DateRangePicker
  selectionMode="month"
  range={false}
  onChange={(sel) => console.log(sel.value)}
/>

<DateRangePicker
  selectionMode="year"
  range={false}
  onChange={(sel) => console.log(sel.value)}
/>

First Day of Week

First Day of Week

Configure which day the calendar week starts on.

First Day of Week
<DateRangePicker
  firstDayOfWeek={1} // Monday
  onChange={(sel) => console.log(sel.value)}
/>

Usage Examples

Basic Usage

import { DateRangePicker } from 'fluxo-ui';
import { useState } from 'react';

function MyComponent() {
  const [dateRange, setDateRange] = useState<[Date, Date] | null>(null);

  return (
    <DateRangePicker
      value={dateRange}
      placeholder="Select date range..."
      onChange={(selection) => setDateRange(selection.value)}
    />
  );
}

With Quick Select Ranges

import { DateRangePicker } from 'fluxo-ui';
import { useState } from 'react';

function MyComponent() {
  const [dateRange, setDateRange] = useState<[Date, Date]>([new Date(), new Date()]);

  const quickRanges = [
    {
      value: 'today',
      label: 'Today',
      range: [new Date(), new Date()] as [Date, Date],
    },
    {
      value: 'last7days',
      label: 'Last 7 Days',
      range: [
        new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
        new Date(),
      ] as [Date, Date],
    },
    {
      value: 'last30days',
      label: 'Last 30 Days',
      range: [
        new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
        new Date(),
      ] as [Date, Date],
    },
  ];

  return (
    <DateRangePicker
      value={dateRange}
      ranges={quickRanges}
      onChange={(selection) => setDateRange(selection.value)}
      onClose={() => console.log('Picker closed')}
    />
  );
}

Advanced Usage

import { DateRangePicker } from 'fluxo-ui';
import { useState } from 'react';

function MyComponent() {
  const [dateRange, setDateRange] = useState<[Date, Date]>([new Date(), new Date()]);

  const today = new Date();
  const maxDate = new Date();
  maxDate.setFullYear(today.getFullYear() + 1);

  return (
    <DateRangePicker
      value={dateRange}
      dateFormat="yyyy-MM-dd"
      separator=" to "
      minDate={today}
      maxDate={maxDate}
      customLabel="Custom Range"
      showTodayButton={true}
      onChange={(selection) => {
        setDateRange(selection.value);
        console.log('Range changed:', selection);
      }}
      onClose={() => console.log('Date range selection complete')}
    />
  );
}

Import

import { DateRangePicker } from 'fluxo-ui';

Props

value
DateRangeValue | string | number

Selected date range [Date, Date] or range option key

ranges
RangeOption[]

Predefined quick range options

onChange
(selection: DateSelectedCallbackArg) => void

Callback fired when date range selection changes

onClose
() => void

Callback fired when date picker closes

dateFormat
string"MM/dd/yyyy"

Date format string for display

separator
string"' ~ '"

Separator between start and end dates

minDate
Date

Minimum selectable date

maxDate
Date

Maximum selectable date

customLabel
string"Custom"

Label for custom date range option

showTodayButton
booleanfalse

Whether to show today button in date picker

disabled
booleanfalse

Whether the picker is disabled

placeholder
string

Placeholder text for empty state

position
PopoverPosition"auto"

Popover position: bottomStart, bottomEnd, topStart, topEnd, auto

id
string

HTML id attribute

name
string

Name attribute for form integration

className
string

CSS class name for container

styles
React.CSSProperties

Inline styles for container

classNames
{ container?: string; control?: string; popover?: string }

Object with CSS classes for specific elements

range
boolean"true"

When false, picker selects a single date instead of a range. Closes immediately on selection.

selectionMode
'day' | 'week' | 'month' | 'year'"day"

Controls what unit is selected: individual days, whole weeks, months, or years

firstDayOfWeek
number"0"

Day the week starts on (0=Sunday, 1=Monday, etc.). Affects calendar grid and week selection.

args
any

Additional arguments passed in onChange callback

locale
any

Locale configuration for date formatting

Features

Calendar Interface

Dual-month calendar for intuitive date range selection with visual range highlighting.

Quick Select Ranges

Pre-built range options like Today, Last 7 Days, Last 30 Days for fast selection.

Custom Formatting

Configure any date format string and custom separator between start and end dates.

Date Constraints

Restrict selectable dates with minDate and maxDate to enforce business rules.

Popover Positioning

Control popover placement with bottomStart, bottomEnd, topStart, topEnd, or auto.

Today Button

Optional today button for quick navigation back to the current date.

Disabled State

Full disabled support prevents user interaction while maintaining visual clarity.

Theming

Full dark/light mode and all 5 brand themes supported automatically via CSS variables.