A flexible and customizable date-time range picker component built with React and Material-UI
npm install date-time-range-flow-pickerbash
npm install date-time-range-flow-picker
`
or
`bash
yarn add date-time-range-flow-picker
`
Peer Dependencies
This package requires the following peer dependencies:
- react (>=16.8.0)
- react-dom (>=16.8.0)
- @mui/material (>=5.0.0)
- @mui/icons-material (>=5.0.0)
- dayjs (>=1.11.0)
Make sure these are installed in your project:
`bash
npm install react react-dom @mui/material @mui/icons-material dayjs
`
Basic Usage
`tsx
import React, { useState, useRef } from 'react';
import DateTimeRangeFlowPicker, { DateTimeRangeFlowPickerHandle } from 'date-time-range-flow-picker';
function App() {
const [dateRange, setDateRange] = useState({
startDate: null as Date | null,
endDate: null as Date | null,
});
const pickerRef = useRef(null);
return (
ref={pickerRef}
value={dateRange}
onChange={setDateRange}
calendarTimeFormat={12}
totalMonthlyDays={28}
/>
);
}
`
Props
$3
| Prop | Type | Description |
|------|------|-------------|
| value | DateValueType | Current date range value with startDate and endDate |
| onChange | (value: DateValueType) => void | Callback when date range changes |
$3
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| onClose | () => void | - | Callback when picker closes |
| monthsToShow | number | 12 | Number of months to show (only works when isPreviousDatesDisabled = true) |
| minDate | Date | - | Minimum selectable date |
| useRange | boolean | true | Enable date range selection |
| showFooter | boolean | true | Show footer with day/week/month shortcuts |
| jumpToTimeAfterSelectingDate | boolean | false | Automatically jump to time picker after selecting date |
| startDateText | string | "Start Reservation" | Label for start date |
| endDateText | string | "End Reservation" | Label for end date |
| isStartDateDisabled | boolean | false | Disable start date selection |
| isEndDateDisabled | boolean | false | Disable end date selection |
| isPreviousDatesDisabled | boolean | false | Disable dates before today |
| isOnlyStartDate | boolean | false | Use only start date (single date mode) |
| isOnlyEndDate | boolean | false | Use only end date (single date mode) |
| showTime | boolean | true | Show time picker |
| mode | "dialog" \| "popover" | "dialog" | Display mode |
| position | "top" \| "bottom" \| "left" \| "right" | "bottom" | Popover position (only for popover mode) |
| anchorEl | HTMLElement \| null | null | Anchor element for popover |
| showArrowsToLoadYear | boolean | false | Show arrows to navigate years |
| calendarTimeFormat | 12 \| 24 | 12 | Time format (12 or 24 hour) |
| totalMonthlyDays | number | 28 | Total days in a month for calculations |
Examples
$3
`tsx
import React, { useState, useRef } from 'react';
import DateTimeRangeFlowPicker, { DateTimeRangeFlowPickerHandle } from 'date-time-range-flow-picker';
function DateRangeExample() {
const [dateRange, setDateRange] = useState({
startDate: null as Date | null,
endDate: null as Date | null,
});
const pickerRef = useRef(null);
return (
ref={pickerRef}
value={dateRange}
onChange={setDateRange}
/>
);
}
`
$3
`tsx
import React, { useState, useRef, useState as useStateHook } from 'react';
import DateTimeRangeFlowPicker, { DateTimeRangeFlowPickerHandle } from 'date-time-range-flow-picker';
function PopoverExample() {
const [dateRange, setDateRange] = useState({
startDate: null as Date | null,
endDate: null as Date | null,
});
const [anchorEl, setAnchorEl] = useStateHook(null);
const pickerRef = useRef(null);
return (
onClick={(e) => {
setAnchorEl(e.currentTarget);
pickerRef.current?.openStart();
}}
>
Open Popover
ref={pickerRef}
value={dateRange}
onChange={setDateRange}
mode="popover"
anchorEl={anchorEl}
position="bottom"
/>
);
}
`
$3
`tsx
import React, { useState, useRef } from 'react';
import DateTimeRangeFlowPicker, { DateTimeRangeFlowPickerHandle } from 'date-time-range-flow-picker';
function SingleDateExample() {
const [dateRange, setDateRange] = useState({
startDate: null as Date | null,
endDate: null as Date | null,
});
const pickerRef = useRef(null);
return (
ref={pickerRef}
value={dateRange}
onChange={setDateRange}
useRange={false}
isOnlyStartDate={true}
startDateText="Select Date"
/>
);
}
`
$3
`tsx
import React, { useState, useRef } from 'react';
import DateTimeRangeFlowPicker, { DateTimeRangeFlowPickerHandle } from 'date-time-range-flow-picker';
function CustomFormatExample() {
const [dateRange, setDateRange] = useState({
startDate: null as Date | null,
endDate: null as Date | null,
});
const pickerRef = useRef(null);
return (
ref={pickerRef}
value={dateRange}
onChange={setDateRange}
calendarTimeFormat={24}
totalMonthlyDays={30}
isPreviousDatesDisabled={true}
jumpToTimeAfterSelectingDate={true}
/>
);
}
`
Ref Methods
The component exposes methods through a ref:
`tsx
const pickerRef = useRef(null);
// Open picker at start date step
pickerRef.current?.openStart();
// Open picker at end date step
pickerRef.current?.openEnd();
`
TypeScript
Full TypeScript support is included. Import types as needed:
`tsx
import type {
DateValueType,
DateTimeRangeFlowPickerHandle,
ActiveStep,
Props,
} from 'date-time-range-flow-picker';
``