{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/react-data-grid/filter-date/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Date filters allow you to filter date data. The "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/filter-provided/"},"children":[{"type":"text","value":"Provided Filters"}]},{"type":"text","value":" and "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/filter-provided-simple/"},"children":[{"type":"text","value":"Simple Filters"}]},{"type":"text","value":" pages explain the parts of the date filter that are the same as the other provided filters. This page builds on that and explains some details that are specific to the date filter."}]},{"type":"element","tagName":"h2","properties":{"id":"date-filter-parameters","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#date-filter-parameters","ariaLabel":"date filter parameters permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Date Filter Parameters"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Date Filters are configured though the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams"}]},{"type":"text","value":" attribute of the column definition. All of the parameters from Provided Filters are available:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"IProvidedFilterParams","names":"[\"buttons\",\"closeOnApply\",\"debounceMs\",\"readOnly\"]","config":"{\"description\":\"\"}","overridesrc":"filter-provided/resources/provided-filters.json"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In addition, the following parameters are also available for Date filters:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"IDateFilterParams","names":"[\"alwaysShowBothConditions\",\"filterOptions\",\"defaultOption\",\"defaultJoinOperator\",\"suppressAndOrCondition\",\"caseSensitive\",\"textFormatter\",\"trimInput\",\"inRangeInclusive\",\"includeBlanksInEquals\",\"includeBlanksInLessThan\",\"includeBlanksInGreaterThan\",\"includeBlanksInRange\",\"allowedCharPattern\",\"numberParser\",\"comparator\",\"browserDatePicker\",\"minValidYear\", \"maxValidYear\"]","config":"{\"description\":\"\"}","overridesrc":"filter-date/resources/date-filter-params.json"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"date-selection-component","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#date-selection-component","ariaLabel":"date selection component permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Date Selection Component"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default the grid will use the browser-provided date picker for Chrome and Firefox (as we think it's nice), but for all other browsers it will provide a simple text field. To override this and provide a custom date picker, see "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/component-date/"},"children":[{"type":"text","value":"Date Component"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"date-filter-comparator","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#date-filter-comparator","ariaLabel":"date filter comparator permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Date Filter Comparator"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Dates can be represented in your data in many ways e.g. as a JavaScript "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Date"}]},{"type":"text","value":" object, as a string in a particular format such as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'26-MAR-2020'"}]},{"type":"text","value":", or something else. How you represent dates will be particular to your application."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default, the date filter assumes you are using JavaScript "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Date"}]},{"type":"text","value":" objects. If this is the case, the date filter will work out of the box. However, if your date is in any other format you will have to provide your own "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"comparator"}]},{"type":"text","value":" to perform the date comparisons."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"IDateFilterParams","names":"[\"comparator\"]","config":"{\"description\":\"\", \"overrideBottomMargin\":\"1rem\"}"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"comparator"}]},{"type":"text","value":" function takes two parameters. The first parameter is a JavaScript "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Date"}]},{"type":"text","value":" object for the selected date in the filter (with the time set to midnight). The second parameter is the current value of the cell in the row being evaluated. The function must return:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Any number < 0 if the cell value is less than the filter date."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"0 if the dates are the same."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Any number > 0 if the cell value is greater than the filter date."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This pattern is intended to be similar to the JavaScript "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"compareTo(a, b)"}]},{"type":"text","value":" function."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Below is an example of using a date filter with a comparator."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n|const gridOptions = {\n|    columnDefs: [\n|        // column definition configured to use a date filter\n|        {\n|            field: 'date',\n|            filter: 'agDateColumnFilter',\n|            // add extra parameters for the date filter\n|            filterParams: {\n|                // provide comparator function\n|                comparator: (filterLocalDateAtMidnight, cellValue) => {\n|                    const dateAsString = cellValue;\n|\n|                    if (dateAsString == null) {\n|                        return 0;\n|                    }\n|\n|                    // In the example application, dates are stored as dd/mm/yyyy\n|                    // We create a Date object for comparison against the filter date\n|                    const dateParts = dateAsString.split('/');\n|                    const year = Number(dateParts[2]);\n|                    const month = Number(dateParts[1]) - 1;\n|                    const day = Number(dateParts[0]);\n|                    const cellDate = new Date(year, month, day);\n|\n|                    // Now that both parameters are Date objects, we can compare\n|                    if (cellDate < filterLocalDateAtMidnight) {\n|                        return -1;\n|                    } else if (cellDate > filterLocalDateAtMidnight) {\n|                        return 1;\n|                    }\n|                    return 0;\n|                }\n|            }\n|        }\n|    ]\n|}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Once the date comparator callback is provided, then the Date Filter is able to perform all the comparison operations it needs, e.g. 'Less Than', 'Greater Than' and 'Equals'."}]},{"type":"element","tagName":"h2","properties":{"id":"date-model-vs-comparison-types","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#date-model-vs-comparison-types","ariaLabel":"date model vs comparison types permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Date Model vs Comparison Types"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It should be noted that the Date Filter Model represents the Date as a string in format "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'YYYY-MM-DD'"}]},{"type":"text","value":", however when doing comparisons the date is provided as a JavaScript "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Date"}]},{"type":"text","value":" object as that's what date pickers typically work with. The model uses string representation to make it easier to save and avoid any timezone issues."}]},{"type":"element","tagName":"h2","properties":{"id":"example-date-filter","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-date-filter","ariaLabel":"example date filter permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example: Date Filter"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows the date filter in action, using some of the configuration options discussed above:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Date"}]},{"type":"text","value":" column is using a Date Filter."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"A custom "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"comparator"}]},{"type":"text","value":" is provided to parse the data and allow date comparisons to be made."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The native date picker is forced to be used in every browser."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The minimum valid year is set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"2000"}]},{"type":"text","value":", and maximum valid year is "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"2021"}]},{"type":"text","value":". Dates outside this range will be considered invalid, and will:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Deactivate the column filter. This avoids the filter getting applied as the user is typing a year - for example suppose the user is typing the year "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"2008"}]},{"type":"text","value":", the filter doesn't execute for values "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"2"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"20"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"200"}]},{"type":"text","value":" (as the text "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"2008"}]},{"type":"text","value":" is partially typed)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Be highlighted with a red border (default theme) or other theme-appropriate highlight."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Date Picker","name":"date-filter","type":"generated","options":"{ \"exampleHeight\": 520 }"},"children":[]}]}]},"frontmatter":{"title":"Date Filter","version":null,"enterprise":null,"description":null},"headings":[{"id":"date-filter-parameters","depth":2,"value":"Date Filter Parameters"},{"id":"date-selection-component","depth":2,"value":"Date Selection Component"},{"id":"date-filter-comparator","depth":2,"value":"Date Filter Comparator"},{"id":"date-model-vs-comparison-types","depth":2,"value":"Date Model vs Comparison Types"},{"id":"example-date-filter","depth":2,"value":"Example: Date Filter"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"react","srcPath":"/filter-date","pageName":"filter-date"}},
    "staticQueryHashes": ["1766026005","3577950178","699667431"]}