how to change date format sent in filter for kendo grid?

Question

I am using kendo ui grid which have custom filter for all date columns. I used custom date filter because I want to sent date in "yyyy-MM-dd" format while filtering. My grid operated completely server side for paging and filters as well.

Below is the kendo code in MVC which I had used for date column -

  columns.Bound(p => p.CreatedOn).Title("Created On").Width("5%").Format("{0:dd/MM/yyyy}").Filterable(filterable => filterable
            .Extra(false).UI("CreatedOnFilter"));

And here is my script used for it -

  function CreatedOnFilter(e) {
    e.kendoDatePicker({
        format: "dd/MM/yyyy",
        change: function () {
            debugger;
            var ds = $("#InvoiceGrid").data().kendoGrid.dataSource;
            var nd = new Date(this.value());
            var day = ("0" + nd.getDate()).slice(-2);
            var mnth = ("0" + (nd.getMonth() + 1)).slice(-2);
            var formattedDate = [nd.getFullYear(), mnth, day].join("-");
            var curr_filters;
            if(ds.filter() != undefined){
                curr_filters = ds.filter().filters;
                var new_filter  = {
                    "filters": [
                      {
                          "field": "CreatedOn",
                          "operator": "contains",///Here is where I want operator as selected by user.
                          "value": formattedDate
                      }
                    ]
                };
                curr_filters.push(new_filter);
            }
            else{
                var new_filter  = {
                    "filters": [
                      {
                          "field": "CreatedOn",
                          "operator": "contains",///Here is where I want operator as selected by user.
                          "value": formattedDate
                      }
                    ]
                };
                curr_filters = new_filter;
            }
            ds.filter(curr_filters);
            this.element.closest("form").data().kendoPopup.close();                
           // kendo.ui.progress($('#divInvoiceList'), false);
        }
    });
}

As shown in above code script. In operator I want it to be as selected by user.

Any help will be highly appreciated.

pradyumnad pradyumnad · Accepted Answer · 2017-03-06T18:57:12

This is how I use in columns

                               {
                                    field : "ReceivedDate",
                                    title : "Date Received",
                                    template : "#= kendo.toString(kendo.parseDate(ReceivedDate, 'yyyy-MM-dd'), 'MM/dd/yyyy') #",
                                    filterable : {
                                        cell : {
                                            showOperators : false,
                                            operator : "eq",
                                            template : function(args) {
                                                args.element.kendoDatePicker({
                                                    format : "MM/dd/yyyy"
                                                });
                                            }
                                        }
                                    }
                                },

template is used to change the format that I receive from server.

how to change date format sent in filter for kendo grid?

1 Answers