Grid date filter for Equals operator

[Suresh]

Hello , 

I'm trying to filter a grid column having DateTime value , for eg - 12/21/2020 12:01:47 PM . and below my implementation .

This works for the first time only and if we open the filter menu again, the filter operator shows as blank (It should have the operator as Equals) and upon selecting a new value from operator list ,it throws JS error at d.filters[0].operator as d.filters[0] is coming as undefined.

Grid filter settings-
.Events(x => x.FilterMenuInit("filterDateWithoutTimeTest"))

.Filterable(f => f.Operators(operators => operators.ForDate(dt => dt.Clear()
                                                        .IsEqualTo("Equals")
                                                        .IsLessThan("EarlierThan")
                                                        .IsGreaterThan("LaterThan")
                                                        )))

 

function filterDateWithoutTimeTest(e) {
        var grid = e.sender;
        if (e.sender.dataSource.options.schema.model.fields[e.field].type === "date") {
            e.preventDefault();
            var columnTobeFiltered = e.field;
            e.container.find('button[type="submit"]').click(function (e) {     
                var existingFilters = grid.dataSource.filter();
                var newFilter = [];               
                var filterType = $(this.form).find($("select[data-role=dropdownlist]")).eq(0).val();
                if (filterType == "eq") {
                   
                    //gets the datePicker input date
                    var selectedDate = $(this.form).find($("input[data-role=datepicker]")).eq(0).val();

                    //    //create a filter
                    grid.dataSource.filter({
                        field: columnTobeFiltered,
                        //create custom filter operator
                        operator: function (fieldDate) {
                            var fieldDate2 = new Date(fieldDate);
                            var parsedSelectedDate = kendo.parseDate(selectedDate);
                            //parse the field date in order to ignore the time
                            var parsedFieldDate = new Date(fieldDate2.getFullYear(), fieldDate2.getMonth(), fieldDate2.getDate());
                            var result = (parsedFieldDate.getTime() == parsedSelectedDate.getTime());

                            return result;

                        },
                        value: selectedDate
                    });

                    //close filter window
                    $(gridElement).find("th[data-field=" + columnTobeFiltered + "]").data("kendoFilterMenu").popup.close();
                }
            })
        }
    }

Any help around this is appreciated.

Thanks

[Nikolay]

Hello Suresh,

If you would like to Filter a DateTime column by date only I suggest following the approach demonstrated in the following article:

• https://docs.telerik.com/kendo-ui/knowledge-base/filter-by-date#transforming-the-filter

Let me know if this helps.

Regards,
Nikolay
Progress Telerik

[Suresh]

Thanks Nikolay !

This seems to be working  the first time only.

Running into the below issue when trying to filter again with Equals operator

Step 1 - Filter the date with Equals operator

Step 2 - Open the filter again , change the date using datepicker 

Noticed that the operator value is blank and the filter selection is removed.

Can you please help here.

[Nikolay]

Hi Suresh,

The recommended approach to make the date filter work for the IsEqualTo operator is to introduce a helper field. There is no need to ignore the minutes at all (as this might lead to unwanted behavior). 

1. Set a new field in the model:

public DateTime EnrollmentDate { get; set; }

public DateTime EnrollmentDateDateOnly { get { return (this.EnrollmentDate.Date); } }

2. Bind the column to the DataOnly, but display the original date:

columns.Bound(x => x.EnrollmentDateDateOnly).ClientTemplate(" #= kendo.toString(EnrollmentDate,\"MM/dd/yyyy hh:mm:ss\") #");

Please try this approach and let me know if it helps.

Regards,
Nikolay
Progress Telerik