使用Kendo UI DateSource按格式化日期时间排序

时间:2014-12-19 02:54:00

标签: sorting datetime kendo-ui datetime-format kendo-datasource

为了创建按日期排序的列表,我创建了以下数据源:

sort: { field: 'dateTime', dir: 'asc' },
schema: {
    model: {
        id: 'Id',
        fields: {
            dateTime: {
                field: 'DateTime',
                type: 'Date',
                parse: function (value) {
                    return kendo.toString(kendo.parseDate(value), 'MM/dd/yyyy hh:mm tt');
                }
            },
            stuff: 'Stuff'
        }
    }
}

在用数据填充之后,我注意到绑定列表中的行按字母顺序排序:

  • 01/02/2015 08:22 PM
  • 12/12/2014 09:00 PM
  • 2014年12月18日下午08:22

如何让这些日期按升序排列顺序排序?

1 个答案:

答案 0 :(得分:1)

我想这是因为这个值被转换为parse函数中的一个字符串所以它不再像日期那样排序所以我从字段中删除了解析代码:

sort: { field: 'dateTime', dir: 'asc' },
schema: {
    model: {
        id: 'Id',
        fields: {
            dateTime: {
                field: 'DateTime',
                type: 'Date'
            },
            stuff: 'Stuff'
        }
    }
}

这将列表视图中显示的日期恢复为默认格式:(2014年12月12日星期五21:00:00 GMT-0500(东部标准时间)),但现在已正确排序。拼图的最后一部分是将我的元素绑定到一个计算属性,该属性解析日期而不是dateTime字段,如下所示:

<强> HTML

<!-- The element: -->
<td data-bind="html: myDate" style="width: auto;"></td>

<强>的JavaScript

// And in the observable:
myDate: function(e) {
    return kendo.toString(kendo.parseDate(e.dateTime), 'MM/dd/yyyy hh:mm tt');
}

这就像一个魅力,我得到了这个:

  • 12/12/2014 09:00 PM
  • 2014年12月18日下午08:22
  • 01/02/2015 08:22 PM

或者,如果您将DateTimePicker绑定到dateTime属性,则更改它时myDate计算属性将不会更新。我通过监听更改并手动触发更改事件来解决这个问题:

viewModel.bind('change', function (e) {
    if (e.field == 'selectedEvent.dateTime') // or whatever your property comes out as
        viewModel.trigger('change', { field: 'myDate' });
});