npm install --save @mui\/x-data-grid react-date-range<\/code><\/pre>\n\n\n\n

Step 2<\/strong>: Create DateFilterComponent and import DateRange and styles into your component:<\/h3>\n\n\n\n
 Your custom date range filter component should handle how the date filter is displayed and function.<\/p>\n\n\n\n
import 'react-date-range\/dist\/styles.css'; \/\/ main style file\nimport 'react-date-range\/dist\/theme\/default.css'\nimport { DateRange } from 'react-date-range';<\/code><\/pre>\n\n\n\n
<DateRange\n     editableDateInputs={true}\n     onChange={handleFilterChange}\n     moveRangeOnFirstSelection={false}\n     ref={dateRangeRef}\n     ranges={state}\n\/><\/code><\/pre>\n\n\n\n
Also for formatting dates let’s setup datajs<\/p>\n\n\n\n
npm install dayjs<\/code><\/pre>\n\n\n\n
import * as dayjs from 'dayjs';\nimport 'react-date-range\/dist\/styles.css'; \/\/ main style file\nimport 'react-date-range\/dist\/theme\/default.css';\nimport { DateRange } from 'react-date-range';\n\nexport function<\/em> DateFilterComponent(props<\/em>) {\n    const { item, applyValue } = props;\n    const [state, setState] = useState(\n        [\n            {\n                startDate: new Date(),\n                endDate: new Date(),      \n                key: \"selection\"\n           }\n        ]);\n\n    const dateRangeRef = useRef(null);\n    const handleFilterChange = (value) => {    \n        applyValue({      \n            ...item,      \n            value: `${dayjs(value.selection.startDate).format(\"DD-MM-YYYY\")}\/${dayjs(value.selection.endDate).format(\"DD-MM-YYYY\")}`\n        });    \n        setState([value.selection]);  \n    };\n    return(\n       <DateRange\n          editableDateInputs={true}\n          onChange={handleFilterChange}\n          moveRangeOnFirstSelection={false}\n          ref={dateRangeRef}\n          ranges={state}\n       \/>\n    )\n}<\/code><\/pre>\n\n\n\n
Key Concepts<\/strong>:<\/h2>\n\n\n\n
\n
Importing Dependencies<\/strong>:\n
\n
The code imports dayjs<\/code> for date manipulation and formatting.<\/li>\n\n\n\n
Stylesheets for react-date-range<\/code> are imported to ensure the component displays correctly.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
Component Structure<\/strong>:\n
\n
The component receives item<\/code> and applyValue<\/code> as props, which are used to apply the selected date range filter.<\/li>\n\n\n\n
useState<\/code> manages the selected date range, initializing both startDate<\/code> and endDate<\/code> to the current date.<\/li>\n\n\n\n
useRef<\/code> creates a reference to the DateRange component, allowing for direct interaction with the date picker.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
Handling Date Selection<\/strong>:\n
\n
The handleFilterChange<\/code> function formats the selected date range using dayjs<\/code>, applying it in the “DD-MM-YYYY” format.<\/li>\n\n\n\n
This function also updates the component’s state with the new date range whenever the user makes a selection.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
Rendering the Date Range Picker<\/strong>:\n
\n
The DateRange<\/code> component from react-date-range<\/code> is rendered with the ability to edit the date inputs.<\/li>\n\n\n\n
The selected date range is displayed and updated as the user interacts with the picker.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
This component integrates a date range filter in a custom way, making it a valuable addition for implementing advanced filters in MUI DataGrid.

Step 3<\/strong>: Set up filterOperators for the date column: The filterOperators prop allows you to customize the operators for a specific column. You will apply the date filter operators using getGridDateOperators() and integrate it with the custom DateFilterComponent<\/p>\n\n\n\n
  const columns = [\n      {\n        field: \"created_at\",\n        headerName: \"Date account created\",\n        type: \"date\",\n        filterOperators: getGridDateOperators()\n          .filter((operator) => operator.value == \"is\")\n          .map((operator) => {\n            return {\n              ...operator,\n              InputComponent: DateFilterComponent,\n              InputComponentProps: { type: \"date\" },\n            };\n          }),\n      }\n    ];<\/code><\/pre>\n\n\n\n
<DataGrid\n    columns={columns}\n    rows={membersList}\n    onSortModelChange={onSortChange}\n    slots={{\n       toolbar: CustomToolbar,\n    }}\n\/><\/code><\/pre>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Probably, each react developer encountered with non effective documentation for different libraries. And spent a lot of time to achievement desired result. In this article, I will guide you through the process of adding a custom DateRange component into the MUI DataGrid, allowing users to filter by date ranges. We’ll be using the DateRange component […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"footnotes":""},"categories":[3],"tags":[8,9,10,7,5],"class_list":["post-34","post","type-post","status-publish","format-standard","hentry","category-react","tag-datagrid","tag-date-range","tag-javascript","tag-mui-datagrid","tag-react"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/olgamatosova.sfdevserver.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/34","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/olgamatosova.sfdevserver.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/olgamatosova.sfdevserver.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/olgamatosova.sfdevserver.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/olgamatosova.sfdevserver.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=34"}],"version-history":[{"count":8,"href":"https:\/\/olgamatosova.sfdevserver.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/34\/revisions"}],"predecessor-version":[{"id":67,"href":"https:\/\/olgamatosova.sfdevserver.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/34\/revisions\/67"}],"wp:attachment":[{"href":"https:\/\/olgamatosova.sfdevserver.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=34"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/olgamatosova.sfdevserver.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=34"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/olgamatosova.sfdevserver.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=34"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}