How to Make Date Time Filter in the KendoReact Grid

[Daniel]

Hi.

I use Column Menu Filter in my data grids and I wonder how can I use the DateTime filter on date fields?

[Daniel]

Ok Solved With filterUI props and DateTimePicker Component but now my problem is how to attach a dropdown to choose an operator like the rest of the column menu filter?

[Konstantin Dikov]

Hello Daniel,

Using the filterUI is the right way for changing the default filter components. As for including the operators DropDownList components, you can take a look at the following KB article, where the operators are included in the custom filter:

• https://www.telerik.com/kendo-react-ui/knowledge-base/grid-autocomplete-gridcolumnmenufilter/

Please give this a try and let us know if further questions arise.

[Daniel]

Hi Konstantin.

Thanks, but in this example when I filter and change the default operator for example filter with the operator "is equal to" and some value and then open again the filter menu its back to the default operator "contains" and the value is empty, how can I make it consistent?

[Konstantin Dikov]

Hi Daniel,

In order to set the changed operators you can use the filterUI properties and find the corresponding operator from the applied filters:

export const CustomFilterUI = (props) => {
  const operators = props.firstFilterProps.operators;
  const logic = props.logicData;
  const productNames = products.map((item) => {
    return item.ProductName;
  });
  const operator1 = props.firstFilterProps.operator;
  const operator2 = props.secondFilterProps.operator;
  const [state, setState] = React.useState({
    first: operator1
      ? operators.filter((i) => i.operator == operator1)[0]
      : operators[0],
    second: operator2
      ? operators.filter((i) => i.operator == operator2)[0]
      : operators[1],
  });

And here is the modified example:

• https://stackblitz.com/edit/react-lw71en?file=app%2FcustomFilterUI.jsx

Hope this helps.