Формат заголовка столбца DevExtreme Grid DateTime

Question

Русский (ru-RU) языковой стандарт по умолчанию установлен на моем P C.

Building. NET Core 3.1 MVC application.

Я использую * Сетка 1005 * для представления некоторых данных.

Мой класс:

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

Вот результат: