This is a migrated thread and some comments may be shown as answers.

Filtering grid with datepicker not working

1 Answer 475 Views
Grid
This is a migrated thread and some comments may be shown as answers.
n/a
Top achievements
Rank 1
n/a asked on 20 May 2019, 02:30 PM

I have a grid with filterable mode: "menu,row". If I filter the dates by equal; not equal; >; <= it doesn't work. All my date are set to dd.mm.yyyy but when I look to my console.log filter value is not set correctly (see code bellow). How can Have the correct format, without time?

filter: function(e) {
    if (e.filter == null) {
        console.log("filter has been cleared");
    } else {
        console.log(e.filter.logic);
        console.log(e.filter.filters[0].field);
        console.log(e.filter.filters[0].operator);
        console.log(e.filter.filters[0].value);
    }
},

 

Answer: 

and
dateReleve
eq
Wed May 08 2019 00:00:00 GMT+0200 (heure d’été d’Europe centrale)

 

 

My code to create column

function createColumn(columnNames,lang){
    return columnNames.map(function(value){
        var hasTemplate = value.template !== null;
        var isHidden = value.hidden == 1;
        var typeDate = value.type == "date";
        var isLink = value.type == "link";
        var hasAttributeClass = value.class_css !== null;
        return {
            field: value.field,
            title: value.title,
            format: typeDate ? "{0:dd.MM.yyyy}" : "",
            filterable: typeDate ? {
                cell: {
                    operator: 'contains',
                    showOperators: false,
                    template: function(args) {
                        args.element.kendoDatePicker({
                            culture: lang,
                            format: "dd.MM.yyyy",
                            parseFormat: "dd.MM.yyyy"
                        });
                    }
                },
                ui:function(element){
                    element.kendoDatePicker({
                        culture: lang,
                        format:'dd.MM.yyyy',
                        parseFormat: "dd.MM.yyyy"
                    })
                }
            } : {
                cell: { operator: 'contains', showOperators: false}
            }
    });
}

 

M< code to create model

 

function createModel(columnNames){
    var model = {};
    var fields = {};
    $.each(columnNames, function(index,value){
        var propType = value.type;
        if (propType === "number" ) {
            fields[value.field] = {
                type: "number"
            };
        } else if (propType === "boolean") {
            fields[value.field] = {
                type: "boolean"
            };
        } else if (propType === "date") {
            //fields[value.field] = kendo.parseDate(value.field, "dd.MM.yyyy");
            fields[value.field] = {
                type: "date",
                format: "{0:dd.MM.yyyy}"
            };
        } else {
            fields[value.field] = {
                type: "string"
            };
        }
    });
    model.fields = fields;
    return model;
}


This code, give me that : 

filter: function(e) {
    if (e.filter == null) {
        console.log("filter has been cleared");
    } else {
        console.log(e.filter.logic);
        console.log(e.filter.filters[0].field);
        console.log(e.filter.filters[0].operator);
        console.log(e.filter.filters[0].value);
    }
},
and
dateReleve
eq
Wed May 08 2019 00:00:00 GMT+0200 (heure d’été d’Europe centrale)

 

How can Have the correct format, without time?

Thank you for your help

1 Answer, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 22 May 2019, 11:58 AM
Hi Yann,

Indeed when filtering a date object the time is also considered. You could ignore the time by creating an additional field which contains only the date part.

Simply generate a new field which contains only the date portion of the datetime value by using the parse function of a DataSource schema. Then bind the column to the newly created field and use the template property to display the datetime field instead.

Below you will find a small sample which demonstrates the above approach:



Regards,
Georgi
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
n/a
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Share this question
or