mui-popover-date-range-picker

mui-popover-date-range-picker a library for creating DateRange picker for MUI components in React projects.

Installation

mui-popover-date-range-picker requires:

• React 18.0.0 or later

yarn add mui-popover-date-range-picker

or

npm install mui-popover-date-range-picker

Usage

import { useState } from 'react';
import DateRangePicker from 'mui-popover-date-range-picker';

const MyComponent = () => {
    const [value, setValue] = useState({ rangeStart: new Date(), rangeEnd: new Date() });

    return <DateRangePicker value={value} onChange={setValue} />;
};

export default MyComponent;

Examples

Checkout live examples on mui-popover-date-range-picker-demo page for various customizations.

API

| Prop | Type | Required | Description | | -------------------------- | -------- | ------------ | -------------------------------------------------------------------------------------------------- | | value | array | yes | value of date range picker | | onChange | func | yes | onChange event of date range picker | | disabled | bool | no | disabled state of date range picker | | format | string | no | date format of date range picker | | placeholderString | string | no | placeholder string of date range picker | | dateFormatter | func | no | date formatted function of date range picker | | clearIcon | node | no | clear icon of date range picker | | calendarIcon | node | no | calendar icon of date range picker | | texts | object | no | CLEAR_TITLE, CLEAR_START_VALUE_TEXT, CLEAR_END_VALUE_TEXT, OPEN_CALENDAR_TITLE, CLOSE_BUTTON_TITLE | | popoverProps | object | no | Props of Popover component | | stackProps | object | no | Props of Stack component | | verticalDividerProps | object | no | Props of vertical Divider component | | horizontalDividerProps | object | no | Props of horizontal Divider component | | startDateCalendarProps | object | no | Props of DateCalendar component of range start | | endDateCalendarProps | object | no | Props of DateCalendar component of range end | | startClearButtonProps | object | no | Props of clear button of range start | | endClearButtonProps | object | no | Props of clear button of range end | | enableTime | bool | no | Enable time selection | | startClockProps | object | no | Props of clock component of range start | | endClockProps | object | no | Props of clock component of range end | | hideCloseButton | bool | no | Hide close button | | closeButtonProps | object | no | Props of close button component | | innerRef | func | no | Ref for TextField |