MUI DateRange Picker

A react date range picker implementation using @mui (v5).

Preview

Live Demo

Check out the project running here!

Usage

npm install @ks-erp/mui-daterange-picker --save

# or with yarn
yarn add @ks-erp/mui-daterange-picker

Basic example

import React from "react";
import { DateRangePicker, DateRange } from "@ks-erp/mui-daterange-picker";

type Props = {}

const App: React.FunctionComponent<Props> = props => {
  const [open, setOpen] = React.useState(false);
  const [dateRange, setDateRange] = React.useState<DateRange>({});

  const toggle = () => setOpen(!open);

  return (
    <DateRangePicker
      open={open}
      toggle={toggle}
      onChange={(range) => setDateRange(range)}
    />
  );
}

export default App;

Types

interface DateRange {
    startDate?: Date,
    endDate?: Date
}

interface DefinedRange {
    label: string,
    startDate: Date,
    endDate: Date
}

Props

Name | Type | Required | Default value | Description :--- |:--------------------------| :--- | :--- | :--- onChange | (DateRange) => void | required | - | handler function for providing selected date range toggle | () => void | required | - | function to show / hide the DateRangePicker initialDateRange | DateRange | optional | {} | initially selected date range minDate | Date or string | optional | 10 years ago | min date allowed in range maxDate | Date or string | optional | 10 years from now | max date allowed in range definedRanges | DefinedRange[] | optional | - | custom defined ranges to show in the list closeOnClickOutside | boolean | optional | true | defines if DateRangePicker will be closed when clicking outside of it wrapperClassName | object | optional | undefined | defines additional wrapper style classes locale | Locale (from date-dns) | optional | undefined | defines locale to use (from date-fns package) DefinedRangesProps|object| optional | | ... MenuProps|object| optional | | ... MonthProps | object | optional | | ... MonthHeaderProps|object| optional | | ... MonthDayProps|object| optional | | ...

DefinedRangesProps

type DefinedRangesProps = {
  className?: string; // Class applied to Root Defined Ranges Element
  classes?: {
    listItem?: string; // Class applied to Defined Ranges List
    listItemActive?: string; // Class applied to Matched Defined Ranges
    listItemTextTypography?: string; // Class applied to Defined Range Label
  },
  allowCustomRangeLabel?: boolean; // Allow non-match range label
  customRangeLabel?: string; // non-match label
}

MenuProps

type MenuProps = {
  classes?: {
    rangesMenuDivider?: string; // Class applied to divider between Defined Ranges and Picker
    valueContainer?: string; // Class applied to picker value container
    valueItem?: string; // Class applied to picker value item
  };
  renderValue?: (valueType: "start" | "end", _?: Date, locale?: Locale) => React.ReactNode; // Function to render value
  hideRangeArrow?: boolean;
  hideHeaderDivider?: boolean;
  hideMonthDivider?: boolean;
}

MonthProps

type MonthProps = {
  weekdaysDisplayLocale?: Locale;
  weekStartOn?: number; // 0 | 1 | 2 | 3 | 4 | 5 | 6
  classes?: {
    root?: string; // Class applied to Month Container
    dayInMonthGrid?: string;
    weekday?: string;
    weekend?: string;
  };
  containerSx?: SxProps; // MUI SxProps applied to Month Container
};

MonthHeaderProps

type MonthHeaderProps = {
  customMonthLabels?: string[];
  classes?: {
    root?: string; // Class applied to Month Picker Container
    navWrap?: string; // Class applied to navigation wrap
    nav?: string; // Class applied to navigation
  };
  renderPrevIcon?: (disabled?: boolean) => React.ReactNode; // Render Function applied to Previous Month Navigation Icon
  renderNextIcon?: (disabled?: boolean) => React.ReactNode; // Render Function applied to Next Month Navigation Icon
  selectProps?: SelectProps<number>; // MUI Select Props, applied to Month/Year Select Element
}

MonthDayProps

type MonthDayProps = {
  classes?: {
    root?: string; // Class applied to Day box button
    outlined?: string // Class applied to current date (outlined)
    highlighted?: string; // Class applied to highlighted days (days in range)
    btnFilled?: string; // Class applied to Start/End range day button
    text?: string; // Class applied to Day text
    weekendText?: string; // Class applied to Weekend day text
    filledText?: string; // Class applied to Start/End Range text
    startOfRange?: string; // Class applied to Start range day wrapper
    endOfRange?: string; // Class applied to End range day wrapper
    btnStartOfRange?: string; // Class applied to Start range day button
    btnEndOfRange?: string; // Class applied to End range day button
  };
  borderRadius?: string; // Radius of Day button
  height?: any; // In px or number, heigh of Day button
}