DevExtreme Grid DateTime 列头过滤器格式

Question

俄语（ru-RU）区域设置在我的 PC 上设置为默认设置。

构建 .NET Core 3.1 MVC 应用程序。

我正在使用DevExtreme 网格来表示一些数据。

我的班级：

     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);
        }

我认为DxDataGrid：

    @(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))
)

这是我在浏览器中得到的：

我启用了标题过滤器，当我尝试过滤日期列时，我得到了包含时区，这使得过滤器看起来很糟糕并且使用起来不舒服。

这是过滤器的外观：

作为一个选项，可以创建将DateTime 转换为正确格式的字符串的属性，并使用它来代替真实日期属性。 但我希望有一种方法可以使过滤日期格式dd.MM.yyyy 无需数据类中的其他属性。

Answer 1

这是系统提供的日期显示格式。

需要将日期的格式类型修改为customizing data.datasource.postprocess，如下图：

<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>));
})
)

结果如下：