{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/javascript-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. "}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"image-caption","properties":{"src":"filter-date/resources/date-filter.png","alt":"Date Filter","width":"12.5rem","centered":"true"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"enabling-date-filters","style":"position:relative;"},"children":[{"type":"text","value":"Enabling Date Filters"},{"type":"element","tagName":"a","properties":{"href":"#enabling-date-filters","ariaLabel":"enabling date filters permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Date Filter can be configured as shown below:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        {\n            field: 'date',\n            // configure column to use the Date Filter\n            filter: 'agDateColumnFilter',\n            filterParams: {\n                // pass in additional parameters to the Date Filter\n            },\n        },\n    ],\n}\n"}]},{"type":"element","tagName":"h2","properties":{"id":"example-date-filter","style":"position:relative;"},"children":[{"type":"text","value":"Example: Date Filter"},{"type":"element","tagName":"a","properties":{"href":"#example-date-filter","ariaLabel":"example date filter permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows the Date Filter in action:"}]},{"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 "},{"type":"element","tagName":"a","properties":{"href":"#date-filter-comparator"},"children":[{"type":"text","value":"Date Filter 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":"\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":"li","properties":{},"children":[{"type":"text","value":"the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"inRangeFloatingFilterDateFormat"}]},{"type":"text","value":" property has been set to define a custom date format, this is only shown in the floating filter panel when an in-range filter has been applied."}]},{"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":[]}]},{"type":"element","tagName":"h2","properties":{"id":"date-filter-parameters","style":"position:relative;"},"children":[{"type":"text","value":"Date Filter Parameters"},{"type":"element","tagName":"a","properties":{"href":"#date-filter-parameters","ariaLabel":"date filter parameters permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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 ("},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"IDateFilterParams"}]},{"type":"text","value":" interface):"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"IDateFilterParams","config":"{\"description\":\"\", \"sortAlphabetically\":\"true\"}","overridesrc":"filter-date/resources/date-filter-params.json"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"date-selection-component","style":"position:relative;"},"children":[{"type":"text","value":"Date Selection Component"},{"type":"element","tagName":"a","properties":{"href":"#date-selection-component","ariaLabel":"date selection component permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default the grid will use the browser-provided date picker for all "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/supported-browsers/"},"children":[{"type":"text","value":"Supported Browsers"}]},{"type":"text","value":", but for 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/29.3.5/component-date/"},"children":[{"type":"text","value":"Date Component"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is also possible to enable a native date picker for unsupported browsers by setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.browserDatePicker = true"}]},{"type":"text","value":". However, you will need to test this behaviour yourself."}]},{"type":"element","tagName":"h2","properties":{"id":"date-filter-comparator","style":"position:relative;"},"children":[{"type":"text","value":"Date Filter Comparator"},{"type":"element","tagName":"a","properties":{"href":"#date-filter-comparator","ariaLabel":"date filter comparator permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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":"text","value":"Date Model vs Comparison Types"},{"type":"element","tagName":"a","properties":{"href":"#date-model-vs-comparison-types","ariaLabel":"date model vs comparison types permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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":"date-filter-model","style":"position:relative;"},"children":[{"type":"text","value":"Date Filter Model"},{"type":"element","tagName":"a","properties":{"href":"#date-filter-model","ariaLabel":"date filter model permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Filter Model describes the current state of the applied Date Filter. If only one "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/filter-conditions/"},"children":[{"type":"text","value":"Filter Condition"}]},{"type":"text","value":" is set, this will be a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"DateFilterModel"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"DateFilterModel","config":"{\"description\":\"\"}"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If more than one Filter Condition is set, then multiple instances of the model are created and wrapped inside a Combined Model ("},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ICombinedSimpleModel<DateFilterModel>"}]},{"type":"text","value":"). A Combined Model looks as follows:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"ts"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-ts"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-ts"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// A filter combining multiple conditions"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"interface"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"ICombinedSimpleModel"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"DateFilterModel"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    filterType"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","builtin"]},"children":[{"type":"text","value":"string"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n    operator"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" JoinOperator"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n    "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// multiple instances of the Filter Model"}]},{"type":"text","value":"\n    conditions"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" DateFilterModel"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"type"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"JoinOperator"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'AND'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"|"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'OR'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that in AG Grid versions prior to 29.2, only two Filter Conditions were supported. These appeared in the Combined Model as properties "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"condition1"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"condition2"}]},{"type":"text","value":". The grid will still accept and supply models using these properties, but this behaviour is deprecated. The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"conditions"}]},{"type":"text","value":" property should be used instead."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"An example of a Filter Model with two conditions is as follows:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Date Filter with two conditions, both are equals type"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" dateEquals04OrEquals08 "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    filterType"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'date'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    operator"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'OR'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    conditions"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n            filterType"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'date'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n            type"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'equals'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n            dateFrom"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'2004-08-29'"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n            filterType"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'date'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n            type"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'equals'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n            dateFrom"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'2008-08-24'"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"date-filter-options","style":"position:relative;"},"children":[{"type":"text","value":"Date Filter Options"},{"type":"element","tagName":"a","properties":{"href":"#date-filter-options","ariaLabel":"date filter options permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Date Filter presents a list of "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/filter-conditions/#filter-options"},"children":[{"type":"text","value":"Filter Options"}]},{"type":"text","value":" to the user."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The list of options are as follows:"}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tagName":"table","properties":{},"children":[{"type":"element","tagName":"thead","properties":{},"children":[{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Option Name"}]},{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Option Key"}]},{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Included by Default"}]}]}]},{"type":"element","tagName":"tbody","properties":{},"children":[{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Equals"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"equals"}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Yes"}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Greater than"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"greaterThan"}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Yes"}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Less than"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"lessThan"}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Yes"}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Not equal"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"notEqual"}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Yes"}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"In range"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"inRange"}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Yes"}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Blank"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"blank"}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Yes"}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Not blank"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"notBlank"}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Yes"}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Choose One"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"empty"}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"No"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"empty"}]},{"type":"text","value":" filter option is primarily used when creating "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/filter-conditions/#custom-filter-options"},"children":[{"type":"text","value":"Custom Filter Options"}]},{"type":"text","value":". When 'Choose One' is displayed, the filter is not active."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The default option for the Date Filter is "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"equals"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"date-filter-values","style":"position:relative;"},"children":[{"type":"text","value":"Date Filter Values"},{"type":"element","tagName":"a","properties":{"href":"#date-filter-values","ariaLabel":"date filter values permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default, the values supplied to the Date Filter are retrieved from the data based on the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"field"}]},{"type":"text","value":" attribute. This can be overridden by providing a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterValueGetter"}]},{"type":"text","value":" in the Column Definition. This is similar to using a "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/value-getters"},"children":[{"type":"text","value":"Value Getter"}]},{"type":"text","value":", but is specific to the filter."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"column-properties/properties.json","section":"filtering","names":"[\"filterValueGetter\"]"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"applying-the-date-filter","style":"position:relative;"},"children":[{"type":"text","value":"Applying the Date Filter"},{"type":"element","tagName":"a","properties":{"href":"#applying-the-date-filter","ariaLabel":"applying the date filter permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Applying the Date Filter is described in more detail in the following sections:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/filter-applying/#apply-clear-reset-and-cancel-buttons"},"children":[{"type":"text","value":"Apply, Clear, Reset and Cancel Buttons"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/filter-applying/#applying-the-ui-model"},"children":[{"type":"text","value":"Applying the UI Model"}]}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"h2","properties":{"id":"blank-cells","style":"position:relative;"},"children":[{"type":"text","value":"Blank Cells"},{"type":"element","tagName":"a","properties":{"href":"#blank-cells","ariaLabel":"blank cells permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If the row data contains blanks (i.e. "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":"), by default the row won't be included in filter results. To change this, use the filter params "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"includeBlanksInEquals"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"includeBlanksInLessThan"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"includeBlanksInGreaterThan"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"includeBlanksInRange"}]},{"type":"text","value":". For example, the code snippet below configures a filter to include "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":" for equals, but not for less than, greater than or in range:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" filterParams "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    includeBlanksInEquals"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    includeBlanksInLessThan"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"false"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    includeBlanksInGreaterThan"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"false"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    includeBlanksInRange"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"false"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the following example you can filter by date and see how blank values are included. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Column "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Date"}]},{"type":"text","value":" has both "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":" values resulting in blank cells."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Toggle the controls on the top to see how "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"includeBlanksInEquals"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"includeBlanksInLessThan"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"includeBlanksInGreaterThan"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"includeBlanksInRange"}]},{"type":"text","value":" impact the search result."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Date Null Filtering","name":"date-null-filtering","type":"typescript","options":"{ \"exampleHeight\": 310 }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"data-updates","style":"position:relative;"},"children":[{"type":"text","value":"Data Updates"},{"type":"element","tagName":"a","properties":{"href":"#data-updates","ariaLabel":"data updates permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Date Filter is not affected by data changes. When the grid data is updated, the filter value will remain unchanged and the filter will be re-applied based on the updated data (e.g. the displayed rows will update if necessary)."}]},{"type":"element","tagName":"h2","properties":{"id":"next-up","style":"position:relative;"},"children":[{"type":"text","value":"Next Up"},{"type":"element","tagName":"a","properties":{"href":"#next-up","ariaLabel":"next up permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Continue to the next section to learn about "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/filter-set/"},"children":[{"type":"text","value":"Set Filters"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"Date Filter","version":null,"enterprise":null,"sideMenu":null,"description":null},"headings":[{"id":"enabling-date-filters","depth":2,"value":"Enabling Date Filters"},{"id":"example-date-filter","depth":2,"value":"Example: Date Filter"},{"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":"date-filter-model","depth":2,"value":"Date Filter Model"},{"id":"date-filter-options","depth":2,"value":"Date Filter Options"},{"id":"date-filter-values","depth":2,"value":"Date Filter Values"},{"id":"applying-the-date-filter","depth":2,"value":"Applying the Date Filter"},{"id":"blank-cells","depth":2,"value":"Blank Cells"},{"id":"data-updates","depth":2,"value":"Data Updates"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"javascript","srcPath":"/filter-date","pageName":"filter-date"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}