Kendo网格日期列未格式化


69

我在KendoGrid下面有一个喜欢的东西,当我运行该应用程序时,我没有得到预期的date列格式。

$("#empGrid").kendoGrid({
    dataSource: {
        data: empModel.Value,
        pageSize: 10
    },

    columns: [
        {
            field: "Name",
            width: 90,
            title: "Name"
        },

        {
            field: "DOJ",
            width: 90,
            title: "DOJ",
            type: "date",
            format:"{0:MM-dd-yyyy}" 
        }
    ]
});

运行此命令时,2013-07-02T00:00:00Z在DOJ列中显示“ ”。为什么不格式化?任何想法?


抱歉,Myzifer仍然有问题。甚至我也尝试过模板:“#= kendo.toString(Date,'MM / dd / yyyy')#”也。并在onabai.wordpress.com/2012/09/28/上尝试了此方法……但是没有运气:(
玩笑

据我所知,关键组件是parameterMap设置,没有它,您将很难设置它,是否需要有关parameterMap的更多详细信息?
Myzifer

是的,你可以提供有关parameterMap的更多的细节
jestges

对不起Myzifer ......我试图以同样的方式,但不知何故未能:(
jestges

它显示的内容是什么,您能否链接我的代码,以便查看是否可以发现任何错误,因为有时它可能是一个多余的字符或丝毫破坏它的东西。
Myzifer 2013年

Answers:


122

我找到了这条信息,并使其正常工作。给我的数据是字符串格式的,因此我需要先使用解析字符串,kendo.parseDate然后再使用对其进行格式化kendo.toString

columns: [
    {
        field: "FirstName",
        title: "FIRST NAME"
    },
    {
        field: "LastName",
        title: "LAST NAME"
    },
    {
        field: "DateOfBirth",
        title: "DATE OF BIRTH",
        template: "#= kendo.toString(kendo.parseDate(DateOfBirth, 'yyyy-MM-dd'), 'MM/dd/yyyy') #"
    },
...


参考文献:

  1. 网格格式日期
  2. jsfiddle
  3. kendo ui日期格式

1
确实可以,但是我会在数据源上使用parse函数,然后按如下所述进行格式化,而不是像这样感觉更干净:)
战争

42

只需要将列的数据类型放在数据源中

dataSource: {
      data: empModel.Value,
      pageSize: 10,
      schema:  {
                model: {
                    fields: {
                        DOJ: { type: "date" }
                            }
                       }
               }  
           }

然后您的语句列:

 columns: [
    {
        field: "Name",
        width: 90,
        title: "Name"
    },

    {
        field: "DOJ",
        width: 90,
        title: "DOJ",
        type: "date",
        format:"{0:MM-dd-yyyy}" 
    }
]

3
我使用最新版本做了几乎完全相同的事情,唯一的变化是URL,但显然不起作用。似乎kendo必须以这种方式获取日期对象以进行格式化,而odata结果并不总是返回js日期对象,因此要使其正常工作,您必须处理如下所示的parse函数:onabai.wordpress。 com / 2012/09/28 /… ...问题似乎是.Net似乎在将WebAPI与OData结合使用以返回结果的情况下以ISO格式返回数据。
战争

2
换句话说,“这取决于您的OData日期字符串的格式”,但这是对此答案中没有引用的假设。
战争

1
这对我来说是正确的答案。结束括号放错了位置,因此没有考虑架构,而我的第一个解决方案是aholtry发布的内容。如果没有架构且没有格式,则日期将显示为问题(2013-07-02T00:00:00Z)中提到的玩笑。但是,当我固定括号时,日期将显示为完全冗长的日期(2016年1月1日星期五,格林尼治标准时间-0800(太平洋标准时间)),此时该format属性开始起作用,我可以摆脱掉接受答案的双重转换。
安德鲁

1
这是干净而正确的方法。1.在架构中声明列类型,然后使用如上所示的简单格式定义
DavidDunham

1
尽管我type: "Date"在该字段上,并已从列属性中删除了此属性,但是这对我有用。
安迪G

10

尝试将剑道网格中的日期格式化为:

columns.Bound(x => x.LastUpdateDate).ClientTemplate("#= kendo.toString(LastUpdateDate, \"MM/dd/yyyy hh:mm tt\") #");

2
这假定服务器上使用了MVC包装器。...samepl建议询问的人正在使用JS客户端脚本来构建网格,因此...无济于事。
战争

@Wardy,语法不同,格式字符串相同。明白了吗?仔细观察,非常接近
Gurrawar

您无视我的观点...如果我要求使用C#解决方案,而您却给了我一个C ++答案,那么它无济于事...这是相同的概念。另外:Kendo在客户端上的行为并不总是与在服务器上的行为相同(实际上,它在客户端的2个不同位置上的行为并不相同)。
战争

10

这是使用ASP.NET的方法:

add .Format("{0:dd/MM/yyyy HH:mm:ss}"); 

    @(Html.Kendo().Grid<AlphaStatic.Domain.ViewModels.AttributeHistoryViewModel>()
            .Name("grid")
            .Columns(columns =>
            {

                columns.Bound(c => c.AttributeName);
                columns.Bound(c => c.UpdatedDate).Format("{0:dd/MM/yyyy HH:mm:ss}");   
            })
            .HtmlAttributes(new { @class = ".big-grid" })
            .Resizable(x => x.Columns(true))
            .Sortable()
            .Filterable()    
            .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(true)
                .ServerOperation(false)
                        .Model(model =>
                        {
                            model.Id(c => c.Id);
                        })       
               .Read(read => read.Action("Read_AttributeHistory", "Attribute",  new { attributeId = attributeId })))
            )

6

我使用的选项如下:

columns.Bound(p => p.OrderDate).Format("{0:d}").ClientTemplate("#=formatDate(OrderDate)#");

function formatDate(OrderDate) {
    var formatedOrderDate = kendo.format("{0:d}", OrderDate);

    return formatedOrderDate;
}

3

据我所知,要格式化日期值,您必须在parameterMap中进行处理,

$('#listDiv').kendoGrid({
            dataSource: {
                type: 'json',
                serverPaging: true,
                pageSize: 10,
                transport: {
                    read: {
                        url: '@Url.Action("_ListMy", "Placement")',
                        data: refreshGridParams,
                        type: 'POST'
                    },
                    parameterMap: function (options, operation) {
                        if (operation != "read") {
                            var d = new Date(options.StartDate);
                            options.StartDate = kendo.toString(new Date(d), "dd/MM/yyyy");
                            return options;
                        }
                        else { return options; }

                    }
                },
                schema: {
                    model: {
                        id: 'Id',
                        fields: {
                            Id: { type: 'number' },
                            StartDate: { type: 'date', format: 'dd/MM/yyyy' },
                            Area: { type: 'string' },
                            Length: { type: 'string' },
                            Display: { type: 'string' },
                            Status: { type: 'string' },
                            Edit: { type: 'string' }
                        }
                    },
                    data: "Data",
                    total: "Count"
                }
            },
            scrollable: false,
            columns:
                [
                    {
                        field: 'StartDate',
                        title: 'Start Date',
                        format: '{0:dd/MM/yyyy}',
                        width: 100
                    },

如果您遵循上述示例,只是重命名了“ StartDate”之类的对象,则它应该起作用(忽略“ data:refreshGridParams”)

有关更多详细信息,请查看下面的链接,或仅搜索kendo grid parameterMap和其他人所做的。

http://docs.kendoui.c​​om/api/framework/datasource#configuration-transport.parameterMap


这仅将代码应用于“非读取操作” ...有点傻瓜,因为它正在读取要对其执行操作的数据,而且您正在将格式应用于传输而不是生成的数据...所以这有什么帮助?
战争

0

这可能会有所帮助:

columns.Bound(date=> date.START_DATE).Title("Start Date").Format("{0:MM dd, yyyy}");
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.