首页 > 解决方案 > DevExtreme Grid DateTime 列头过滤器格式

问题描述

俄语(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在数据类中没有其他属性的情况下制作过滤日期格式。

标签: .net-coreasp.net-core-mvcdevextreme

解决方案


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

需要修改 date 的格式类型 by 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>));
})
)

结果如下:

在此处输入图像描述


推荐阅读