.net-core - 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
在数据类中没有其他属性的情况下制作过滤日期格式。
解决方案
这是系统提供的日期显示格式。
需要修改 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>));
})
)
结果如下:
推荐阅读
- ios - 作为名称中带有特殊字符的公司注册 Apple Developer Program
- php - ACF 按特定字段排序问题
- android - 真正的全屏不能在 Android 中使用 AppCompat 主题?
- java - 导出到 JAR 文件时找不到合适的驱动程序?
- angular - 如何滚动到组件位置?
- django - 'IntegerField' 对象没有属性 'value_from_datadict' 错误
- firebase - Firebase 自定义 Google 身份验证登录
- debian - prometheus:无法启动监控系统和时间序列数据库
- c# - ASP.Net MVC:如何使用 List ViewData 对象或从控制器传递到视图的其他复杂对象
- awk - AWK 搜索特定序列,如果找到则在下一行搜索另一个序列 version2