Vue Data Grid: Date Component

onDateChanged = () => void;

filterParams: DateFilterParams;

type DateFilterParams = 
      IDateFilterParams & IFilterParams<TData>


interface IDateFilterParams {
  // Required if the data for the column are not native JS `Date` objects. 
  comparator?: IDateComparatorFunc;
  // Defines whether the grid uses the browser date picker or a plain text box.
  //  - `true`: Force the browser date picker to be used.
  //  - `false`: Force a plain text box to be used.
  // 
  // Default: `undefined` - If a date component is not provided, then the grid will use the browser date picker
  // for all supported browsers and a plain text box for other browsers.
  browserDatePicker?: boolean;
  // This is the minimum year that may be entered in a date field for the value to be considered valid. Default: `1000` 
  minValidYear?: 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. 
  maxValidYear?: number;
  // Defines the date format for the floating filter text when an in range filter has been applied.
  // 
  // Default: `YYYY-MM-DD`
  inRangeFloatingFilterDateFormat?: string;
  // If `true`, the `'inRange'` filter option will include values equal to the start and end of the range. 
  inRangeInclusive?: boolean;
  // If `true`, blank (`null` or `undefined`) values will pass the `'equals'` filter option. 
  includeBlanksInEquals?: boolean;
  // If `true`, blank (`null` or `undefined`) values will pass the `'lessThan'` and `'lessThanOrEqual'` filter options. 
  includeBlanksInLessThan?: boolean;
  // If `true`, blank (`null` or `undefined`) values will pass the `'greaterThan'` and `'greaterThanOrEqual'` filter options. 
  includeBlanksInGreaterThan?: boolean;
  // If `true`, blank (`null` or `undefined`) values will pass the `'inRange'` filter option. 
  includeBlanksInRange?: boolean;
  // Array of filter options to present to the user.
  filterOptions?: (IFilterOptionDef | ISimpleFilterModelType)[];
  // The default filter option to be selected. 
  defaultOption?: string;
  // By default, the two conditions are combined using `AND`.
  // You can change this default by setting this property.
  // Options: `AND`, `OR`
  defaultJoinOperator?: JoinOperator;
  // Maximum number of conditions allowed in the filter.
  // Default: `2`
  maxNumConditions?: number;
  // 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. 
  // Default: `1`
  numAlwaysVisibleConditions?: number;
  // Placeholder text for the filter textbox
  filterPlaceholder?: FilterPlaceholderFunction | string;
  // Specifies the buttons to be shown in the filter, in the order they should be displayed in.
  // The options are:
  // 
  //  - `'apply'`: If the Apply button is present, the filter is only applied after the user hits the Apply button.
  //  - `'clear'`: The Clear button will clear the (form) details of the filter without removing any active filters on the column.
  //  - `'reset'`: The Reset button will clear the details of the filter and any active filters on that column.
  //  - `'cancel'`: The Cancel button will discard any changes that have been made to the filter in the UI, restoring the applied model.
  buttons?: FilterButtonType[];
  // 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`.
  // 
  // Default: `false`
  closeOnApply?: boolean;
  // Overrides the default debounce time in milliseconds for the filter. Defaults are:
  // - `TextFilter` and `NumberFilter`: 500ms. (These filters have text field inputs, so a short delay before the input is formatted and the filtering applied is usually appropriate).
  // - `DateFilter` and `SetFilter`: 0ms
  debounceMs?: number;
  // If set to `true`, disables controls in the filter to mutate its state. Normally this would
  // be used in conjunction with the Filter API.
  // 
  // Default: `false`
  readOnly?: boolean;
}

type FilterPlaceholderFunction = 
      (params: IFilterPlaceholderFunctionParams) => string


interface IFilterPlaceholderFunctionParams {
  // The filter option key
  filterOptionKey: ISimpleFilterModelType;
  // The filter option name as localised text
  filterOption: string;
  // The default placeholder text
  placeholder: string;
}

interface IFilterParams<TData = any, TContext = any> {
  // The column this filter is for. 
  column: Column;
  // The column definition for the column. 
  colDef: ColDef<TData>;
  // The row model, helpful for looking up data values if needed.
  // If the filter needs to know which rows are
  // a) in the table,
  // b) currently visible (i.e. not already filtered),
  // c) which groups,
  // d) what order - all of this can be read from the rowModel.
  rowModel: IRowModel;
  // A function callback to be called when the filter changes. The
  // grid will then respond by filtering the grid data. The callback
  // takes one optional parameter which, if included, will get merged
  // to the FilterChangedEvent object (useful for passing additional
  // information to anyone listening to this event, however such extra
  // attributes are not used by the grid).
  filterChangedCallback: (additionalEventAttributes?: any) => void;
  // A function callback, to be optionally called, when the filter UI changes.
  // The grid will respond with emitting a FilterModifiedEvent.
  // Apart from emitting the event, the grid takes no further action.
  filterModifiedCallback: () => void;
  // A function callback for the filter to get cell values from provided row data. Called with a
  // `ValueGetterParams` to get the value for this filter's column for the provided row data.
  //
  // The callback takes care of selecting the right column definition and deciding whether to use
  // the column `valueGetter` or raw field etc.
  valueGetter: ValueGetterFunc<TData>;
  // A function callback, call with a node to be told whether the node passes all filters except the current filter.
  // This is useful if you want to only present to the user values that this filter can filter given the status of the other filters.
  // The set filter uses this to remove from the list,
  // items that are no longer available due to the state of other filters (like Excel type filtering).
  doesRowPassOtherFilter: (rowNode: IRowNode<TData>) => boolean;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
}