Angular KendoUI带筛选通用表格DateTime字段格式化并添加O'clock

针对你的需求，在dateTime分支中实现日期格式转换与"O'clock"追加的完整代码如下：

protected mapToDisplayData(): K[] {
    if (!this.data) { return []; }

    return this.data.map((d: K) => {
        const keys = Object.keys(d) as Array<keyof K>;
        const filterable: any = {};
        for (const key of keys) {
            const propValue = d[key];
            filterable[key] = propValue;

            const column = this.gridColumnSettings?.filter(s => s.field === key)[0];
            if (!column) {
                continue;
            }

            if (Array.isArray(propValue)) {
                filterable[key] = propValue.join('');
                continue;
            }

            const propValueString = ObjectExtensions.stringify(propValue);

            switch (column.type) {
                case 'status':
                    filterable[key] = this.columnTemplateService.getStatusDisplayValue(propValueString as Status, this.statusDisplayValues);
                    break;
                case 'guid':
                    filterable[key] = this.columnTemplateService.getSlicedGuid(propValueString);
                    break;
                case 'boolean':
                    filterable[key] = this.columnTemplateService.getBooleanDisplayValue(key, propValue as any, this.booleanDisplayValues);
                    break;
                case 'dateTime':
                    // 解析原始日期并格式化为目标格式
                    const date = new Date(propValue);
                    const day = String(date.getDate()).padStart(2, '0');
                    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需加1
                    const year = date.getFullYear();
                    const hours = String(date.getHours()).padStart(2, '0');
                    const minutes = String(date.getMinutes()).padStart(2, '0');
                    filterable[key] = `${day}.${month}.${year} ${hours}:${minutes} O'clock`;
                    break;
            }
        }
        return filterable;
    });
}

关键实现说明 #

• 通过new Date(propValue)将原始日期字符串/对象转换为可操作的Date实例
• 使用padStart(2, '0')确保日、月、时、分均为两位数字，避免单数字格式问题
• 按DD.MM.YYYY HH:mm O'clock的格式拼接最终显示文本

内容的提问来源于stack exchange，提问作者Marcelll