Date filters allow you to filter date data. The Provided Filters and Simple Filters 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.
Date Filter Parameters
Date Filters are configured though the
filterParams attribute of the column definition. All of the
parameters from Provided Filters are available:
|Specifies the buttons to be shown in the filter, in the order they should be displayed in. The options are: |
|If the Apply button is present, the filter popup will be closed immediately when the Apply or Reset button is clicked if this is set to |
|By default the Text and Number filters will debounce by 500ms. This is because these filters have text field inputs, so time is given to the user to type items in before the input is formatted and the filtering applied. The Set and Date will execute immediately (no debounce). To override these defaults, set |
|This property is for when using the Client Side Row Model only. When set to |
In addition, the following parameters are also available:
|By default, only one condition is shown, and a second is made visible once a first condition has been entered. Set this to |
|Array of Filter Options to present to the user.|
|The default Filter Option to be selected.|
|By default, the two conditions are combined using |
|Required if the data for the column are not native JS |
|This is only used if a date component is not provided. By default the grid will use the browser date picker in Chrome and Firefox and a plain text box for all other browsers (this is because Chrome and Firefox are the only current browsers providing a decent out-of-the-box date picker). If this property is set to |
|This is the minimum year that must be entered in a date field for the value to be considered valid.|
Date Selection Component
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 Date Component.
Date Filter Comparator
Date object, as a string in
a particular format such as
'26-MAR-2020', or something else. How you represent dates will be particular to your application.
Date 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
comparator to perform the date comparisons.
comparator function takes two parameters. The first parameter is a
Date 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:
- Any number < 0 if the cell value is less than the filter date
- 0 if the dates are the same
- Any number > 0 if the cell value is greater than the filter date
compareTo(a, b) function.
Below is an example of using a date filter with a comparator.
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'.
Date Model vs Comparison Types
It should be noted that the Date Filter Model represents the Date as a string in format
Date 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
Example: Date Filter
The example below shows the date filter in action, using some of the configuration options discussed above:
- The Date column is using a Date Filter.
- A custom
comparatoris provided to parse the data and allow date comparisons to be made.
- The native date picker is forced to be used in every browser.
The minimum valid year is set to
2000, so dates entered into the filter with a year less than 2000 will not be recognised.