DevExtreme Grid DateTime column head filter format

Question

Russian(ru-RU) locale is set as default on my PC.

Building .NET Core 3.1 MVC application.

I'm using DevExtreme grid to represent some data.

My class:

     public class DateTest
    {
        public string Name { get; set; }
        public DateTime TestDate { get; set; }
    }
My action with test data:

    public IActionResult Test()
        {
            var model = new List<DateTest>
            {
                new DateTest{ Name = "wa1", TestDate = new DateTime(2020,1,1) },
                new DateTest{ Name = "wa2", TestDate = new DateTime(2020,2,2) },
                new DateTest{ Name = "wa3", TestDate = new DateTime(2020,3,3) },
                new DateTest{ Name = "wa4", TestDate = new DateTime(2020,4,4) },
                new DateTest{ Name = "wa5", TestDate = new DateTime(2020,5,5) },
                new DateTest{ Name = "wa6", TestDate = new DateTime(2020,6,6) },
                new DateTest{ Name = "wa7", TestDate = new DateTime(2020,7,7) }
            };
            return View("Test", model);
        }

And DxDataGrid on my view:

    @(Html.DevExtreme().DataGrid<dxDates.Models.DateTest>()
    .DataSource(Model)
    .RemoteOperations(true)
    .Columns(columns => {

        columns.AddFor(m => m.Name);

        columns.AddFor(m => m.TestDate);
    })
    .HeaderFilter(c=>c.Visible(true))
)

This is what I get in browser:

I enabled header filter, when I try to filter date column I get timezone included, which makes filter look terrible and uncomfortable to use.

This is how filter looks:

As an option it's possible to create property which converts DateTime to string in correct format and use it instead of real date property. But I hope there's a way to make filter date format dd.MM.yyyy without additional properties in data class.

Answer 1

This is the date display format provided by the system.

You need to modify the format type of date by customizing data.datasource.postprocess, as shown below:

<script>
    function GetFilterDate(results) {
        for (var i = 0; i < results.length; i++) {
            results[i].text = formatDate(results[i].key);//here change the datetime text shown in page with the format you want
            if (results[i].hasOwnProperty('items')) {
                GetFilterDate(results[i].items);//Change the display form of each layer through recursive loop
            }
        }
        return results;
    }

   // the function is to change the format of datetime
    function formatDate(date) { 
        var d = new Date(date),
            month = '' + (d.getMonth() + 1),
            day = '' + d.getDate(),
            year = d.getFullYear();

        if (month.length < 2)
            month = '0' + month;
        if (day.length < 2)
            day = '0' + day;
        return [day, month, year].join('.');//here you can change format as you want
    }
</script>
@(Html.DevExtreme().DataGrid<dxDates.Models.DateTest>()
   .DataSource(Model)
   .RemoteOperations(true).HeaderFilter(c => c.Visible(true))
   .Columns(columns =>
        {
       columns.AddFor(m => m.Name);

       columns.AddFor(m => m.TestDate).HeaderFilter(filter => filter.DataSource(@<text>
                    function(data) {
                      data.dataSource.postProcess = function(results) {
                        GetFilterDate(results);//call method in js
                      };
                    }
    </text>));
})
)

Here is the result: