在Kendo UI Grid中加载日期

Question

我在使用ISO日期格式（YYYY-MM-DD）设置Kendo UI网格中的日期字段时遇到问题。

如果我像这样初始化数据源：

var gridDataSource = new kendo.data.DataSource({
    data: [{
        id: 1, description: 'Test 1', begin: '2012-10-01'
    }],
    schema: {
        model: {
            id: 'id',
            fields: {
                id: { type: 'number' },
                description: { type: 'string' },
                begin: { type: 'date' }
            }
        }
    }
});

然后正确显示日期：

但是，如果我使用数据源的data()函数设置它，如下所示：

gridDataSource.data([{
    id: 2, description: 'Test 2', begin: '2012-10-01'
}]);

然后日期未正确显示且内联编辑器无法正常工作：

以下是此问题的demo。

我做错了吗？

Answer 1

如果您将文化kendo.culture（'en-GB'）设置为您想要的文化，则可以使用您指定的任何（文化）格式显示剑道日期。然后你可以使用kendo.parseDate（变量，“yyyy / MM / dd”）;在您发送日期服务器端之前（必须为每个值执行此操作）。只需观看“yyyy / MM / dd”的案例（上部和下部），请参阅this链接

Answer 2

请尝试使用以下代码段。请检查列中的格式。

<script type="text/javascript">
        $(document).ready(function () {
            var gridDataSource = new kendo.data.DataSource({
                data: [{
                    id: 1, description: 'Test 1', begin: '2012-10-01'
                }],
                schema: {
                    model: {
                        id: 'id',
                        fields: {
                            id: { type: 'number' },
                            description: { type: 'string' },
                            begin: { type: 'date' }
                        }
                    }
                }
            });

            $('#grid').kendoGrid({
                dataSource: gridDataSource,
                scrollable: true,
                sortable: true,
                toolbar: ['create'],
                columns: [
            { field: 'id', title: 'ID', width: 'auto' },
            { field: 'description', title: 'Description', width: 'auto' },
            { field: 'begin', title: 'Begin', width: 'auto', format: "{0:yyyy-MM-dd}" },
            { command: ['edit', 'destroy'], title: '&nbsp;', width: '172px' }
        ],
                editable: {
                    mode: 'inline',
                    confirmation: false
                }
            });

            $('#dataButton').click(function () {
                gridDataSource.data([{
                    id: 2, description: 'Test 2', begin: '2012-10-02'
                }]);
            });
        });

    </script>

Demo