Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.ag-grid.com/javascript-data-grid/filter-date/ below:

JavaScript Grid: Date Filter | AG Grid

Date Filters allow you to filter date data.

The Date Filter is the default filter used in AG Grid Community for columns with date Cell Data Type, but it can also be explicitly configured as shown below:

const gridOptions = {
    columnDefs: [
        {
            field: 'startDate',
            
            filter: true,
            filterParams: {
                
            },
        },
        {
            field: 'endDate',
            
            filter: 'agDateColumnFilter',
            filterParams: {
                
            },
        },
    ],

    
}

Date Filters are configured though the filterParams attribute of the column definition (IDateFilterParams interface):

boolean

Defines whether the grid uses the browser date picker or a plain text box.

FilterAction[]

Specifies the buttons to be shown in the filter, in the order they should be displayed in. The options are:

boolean

default: false

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 true.

Function

Required if the data for the column are not native JS Date objects. If cell values can contain invalid dates, should also implement isValidDate.

number

Overrides the default debounce time in milliseconds for the filter. Defaults are:

JoinOperator

By default, the two conditions are combined using AND. You can change this default by setting this property. Options: AND, OR

string

The default filter option to be selected.

(IFilterOptionDef | ISimpleFilterModelType)[]

Array of filter options to present to the user.

FilterPlaceholderFunction | string

Placeholder text for the filter textbox.

string

default: YYYY-MM-DD

Defines the date format for the floating filter text when an inRange filter has been applied.

boolean

If true, the 'inRange' filter option will include values equal to the start and end of the range.

boolean

If true, blank (null or undefined) values will pass the 'equals' filter option.

boolean

If true, blank (null or undefined) values will pass the 'greaterThan' and 'greaterThanOrEqual' filter options.

boolean

If true, blank (null or undefined) values will pass the 'lessThan' and 'lessThanOrEqual' filter options.

boolean

If true, blank (null or undefined) values will pass the 'notEqual' filter option.

boolean

If true, blank (null or undefined) values will pass the 'inRange' filter option.

boolean

default: false

Defines whether time should be included when filtering dates.

Function

If providing a comparator and cell values can contain invalid dates, this can be implemented to allow invalid date values to be filtered out (as the comparator only allows for greater than, less than and equals).

number

default: 2

Maximum number of conditions allowed in the filter.

Date | string

The maximum valid date that can be entered in the filter. It can be a Date object or a string in the format YYYY-MM-DD. If set, this will override maxValidYear - the maximum valid year setting.

number

This is the maximum year that may be entered in a date field for the value to be considered valid. Default is no restriction.

Date | string

The minimum valid date that can be entered in the filter. It can be a Date object or a string in the format YYYY-MM-DD. If set, this will override minValidYear - the minimum valid year setting.

number

default: 1000

This is the minimum year that may be entered in a date field for the value to be considered valid. @default 1000

number

default: 1

By default only one condition is shown, and additional conditions are made visible when the previous conditions are entered (up to maxNumConditions). To have more conditions shown by default, set this to the number required. Conditions will be disabled until the previous conditions have been entered. Note that this cannot be greater than maxNumConditions - anything larger will be ignored.

boolean

default: false

If set to true, disables controls in the filter to mutate its state. Normally this would be used in conjunction with the Filter API.

The example below demonstrates configuring date range filtering in the Date Filter with minimum and maximum validation dates:

• For the Start Date column:
  • The minValidDate parameter is set to '2000-01-01' using a string.
  • The maxValidDate is dynamically set to tomorrow's date using a Date object.
• For the End Date column:
  • The minValidYear parameter is set to 2010.
  • The maxValidYear parameter is set to 2030.
• Dates outside the valid ranges will be invalid.

Dates can be represented in your data in many ways e.g. as a JavaScript 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.

The Date Filter will automatically be configured to work correctly if the Cell Data Type is date, dateString, dateTime or dateTimeString.

If using Date objects, the default date comparator assumes that the Dates do not have a time (e.g. they are at midnight local time). If your dates have times, then you will either need to override the Filter Values to remove the time, to switch cell data type to dateTime, or provide a comparator that can handle the time.

If you are not using Cell Data Types (and the cell value is not a Date object, which will also work automatically), then a comparator needs to be configured to allow the Date Filter to perform the date comparisons.

Function

Required if the data for the column are not native JS Date objects. If cell values can contain invalid dates, should also implement isValidDate.

The comparator function takes two parameters. The first parameter is a JavaScript 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.

This pattern is intended to be similar to the JavaScript compareTo(a, b) function.

A date filter with a comparator can be configured similar to the following:

const gridOptions = {
    columnDefs: [
        
        {
            field: 'date',
            filter: 'agDateColumnFilter',
            
            filterParams: {
                
                comparator: (filterLocalDateAtMidnight, cellValue) => {
                    const dateAsString = cellValue;

                    if (dateAsString == null) {
                        return 0;
                    }

                    
                    
                    const dateParts = dateAsString.split('/');
                    const year = Number(dateParts[2]);
                    const month = Number(dateParts[1]) - 1;
                    const day = Number(dateParts[0]);
                    const cellDate = new Date(year, month, day);

                    
                    if (cellDate < filterLocalDateAtMidnight) {
                        return -1;
                    } else if (cellDate > filterLocalDateAtMidnight) {
                        return 1;
                    }
                    return 0;
                }
            }
        }
    ],

    
}

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'.

If the cell values can contain invalid dates, then the isValidDate filter param should be implemented alongside comparator to allow the invalid date values to be filtered out.

The example below demonstrates configuring a comparator:

The Filter Model describes the current state of the applied Date Filter. The Date Filter Model represents the Date as a string in format 'YYYY-MM-DD', however when doing comparisons the date is provided as a JavaScript 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 issues.

If only one Filter Condition is set, this will be a DateFilterModel:

'date'

Filter type is always 'date'

string | null

The date value(s) associated with the filter. The type is string and format is always YYYY-MM-DD hh:mm:ss e.g. 2019-05-24 00:00:00. Custom filters can have no values (hence both are optional). Range filter has two values (from and to).

string | null

Range filter to date value.

ISimpleFilterModelType | null

One of the filter options, e.g. 'equals'

If more than one Filter Condition is set, then multiple instances of the model are created and wrapped inside a Combined Model (ICombinedSimpleModel<DateFilterModel>). A Combined Model looks as follows:

interface ICombinedSimpleModel<DateFilterModel> {
    filterType: string;

    operator: JoinOperator;

    
    conditions: DateFilterModel[];
}

type JoinOperator = 'AND' | 'OR';

Note that in AG Grid versions prior to 29.2, only two Filter Conditions were supported. These appeared in the Combined Model as properties condition1 and condition2. The grid will still accept and supply models using these properties, but this behaviour is deprecated. The conditions property should be used instead.

An example of a Filter Model with two conditions is as follows:

const dateEquals04OrEquals08 = {
    filterType: 'date',
    operator: 'OR',
    conditions: [
        {
            filterType: 'date',
            type: 'equals',
            dateFrom: '2004-08-29'
        },
        {
            filterType: 'date',
            type: 'equals',
            dateFrom: '2008-08-24'
        }
    ]
};

The Date Filter presents a list of Filter Options to the user.

The list of options is as follows:

Note that the empty filter option is primarily used when creating Custom Filter Options. When 'Choose one' is displayed, the filter is not active.

The default option for the Date Filter is equals.

When providing filter options, the default filter option (or the first option if no default set) must be an option that displays an input or the empty filter option (as a filter option with no inputs would mean the filter is active by default).

By default, the values supplied to the Date Filter are retrieved from the data based on the field attribute. This can be overridden by providing a filterValueGetter in the Column Definition. This is similar to using a Value Getter, but is specific to the filter.

string | ValueGetterFunc

Function or

. Gets the value for filtering purposes.

By default the grid will use the browser-provided date picker for all Supported Browsers, but for other browsers it will provide a simple text field. To override this and provide a custom date picker, see Date Component.

It is also possible to enable a native date picker for unsupported browsers by setting filterParams.browserDatePicker = true. However, you will need to test this behaviour yourself.

You can provide a Date Selection Component to replace the default.

The example below shows how to register a custom date component that contains an extra floating calendar picker rendered from the filter field. The problem with this approach is that we have no control over third party components and therefore no way to implement a preventDefault when the user clicks on the Calendar Picker (for more info see Custom Floating Filter Example). Our way of fixing this problem is to add the ag-custom-component-popup class to the floating calendar.

The interface for a custom date component is as follows:

interface IDateComp {
  // Returns the current date represented by this component 
  getDate(): Date  |  null;

  // Return the DOM element of your component, this is what the grid puts into the DOM 
  getGui(): HTMLElement;

  // Sets the date represented by this component 
  setDate(date: Date | null): void;

  // Gets called once by grid when the component is being removed; if your component needs to do any cleanup, do it here 
  destroy?(): void;

  // The init(params) method is called on the component once. 
  init?(params: IDateParams): AgPromise<void>  |  void;

  // When used in a floating filter, a hook to perform any necessary operations
  // when the column definition is updated.
  refresh?(params: IDateParams): void;

  // Optional: Sets the disabled state of this component 
  setDisabled?(disabled: boolean): void;

  // Optional: Sets the current input placeholder 
  setInputPlaceholder?(placeholder: string): void;

  // Optional: Sets the current input aria label 
  setInputAriaLabel?(placeholder: string): void;

  // Optional: A hook to perform any necessary operation just after
  // the GUI for this component has been rendered on the screen.
  // If a parent popup is closed and reopened (e.g. for filters),
  // this method is called each time the component is shown.
  // This is useful for any logic that requires attachment before executing,
  // such as putting focus on a particular DOM element.
  afterGuiAttached?(params?: IAfterGuiAttachedParams): void;

}

The init(params) method takes a params object with the items listed below:

Properties available on the IDateParams<TData = any, TContext = any> interface.

Function

Method for component to tell AG Grid that the date has changed.

DateFilterParams

DateFilterParams

'filter' | 'floatingFilter'

'filter' | 'floatingFilter'

The grid api.

Application context as set on gridOptions.context.

Applying the Date Filter is described in more detail in the following sections:

• Apply, Clear, Reset and Cancel Buttons
• Applying the UI Model

If the row data contains blanks (i.e. null or undefined), by default the row won't be included in filter results. To change this, use the filter params includeBlanksInEquals, includeBlanksInNotEqual, includeBlanksInLessThan, includeBlanksInGreaterThan and includeBlanksInRange. For example, the code snippet below configures a filter to include null for equals, but not for less than, greater than or in range (between):

const filterParams = {
    includeBlanksInEquals: true,
    includeBlanksInNotEqual: false,
    includeBlanksInLessThan: false,
    includeBlanksInGreaterThan: false,
    includeBlanksInRange: false,
};

In the following example you can filter by date and see how blank values are included. Note the following:

• Column Date has both null and undefined values resulting in blank cells.
• Toggle the controls on the top to see how includeBlanksInEquals, includeBlanksInNotEqual, includeBlanksInLessThan, includeBlanksInGreaterThan and includeBlanksInRange impact the search result.

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).

Continue to the next section to learn about Set Filters.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4