Question

我希望我在Kendo Grid中的时间能够在日，小时，分钟和秒中进行格式化，以显示需要多长时间，而不是日期。例如：我希望125格式化为2h 5min或类似的东西。有可能吗？

<kendo-grid-column
              field="{{column}}"
              format="{0:something}"
            >

Answer 1

以下日期格式适用于Chrome，IE不支持所有格式。根据您的要求，您可以从格式中发出日期部分。

注意：对于剑道网格，您必须应用date:'MM/dd/yyyy'等格式

<强>后端

public todayDate = new Date(Date.parse(Date()));

<强> UI：

<select>
    <option value=""></option>
    <option value="MM/dd/yyyy">[{{todayDate | date:'MM/dd/yyyy'}}]</option>
    <option value="EEEE, MMMM d, yyyy">[{{todayDate | date:'EEEE, MMMM d, yyyy'}}]</option>
    <option value="EEEE, MMMM d, yyyy h:mm a">[{{todayDate | date:'EEEE, MMMM d, yyyy h:mm a'}}]</option>
    <option value="EEEE, MMMM d, yyyy h:mm:ss a">[{{todayDate | date:'EEEE, MMMM d, yyyy h:mm:ss a'}}]</option>
    <option value="MM/dd/yyyy h:mm a">[{{todayDate | date:'MM/dd/yyyy h:mm a'}}]</option>
    <option value="MM/dd/yyyy h:mm:ss a">[{{todayDate | date:'MM/dd/yyyy h:mm:ss a'}}]</option>
    <option value="MMMM d">[{{todayDate | date:'MMMM d'}}]</option>   
    <option value="yyyy-MM-ddTHH:mm:ss">[{{todayDate | date:'yyyy-MM-ddTHH:mm:ss'}}]</option>
    <option value="h:mm a">[{{todayDate | date:'h:mm a'}}]</option>
    <option value="h:mm:ss a">[{{todayDate | date:'h:mm:ss a'}}]</option>      
    <option value="EEEE, MMMM d, yyyy hh:mm:ss a">[{{todayDate | date:'EEEE, MMMM d, yyyy hh:mm:ss a'}}]</option>
    <option value="MMMM yyyy">[{{todayDate | date:'MMMM yyyy'}}]</option>      
</select>

Answer 2

首先，您需要创建自己的Javascript函数或导入将整数解析为小时，分钟和秒组件的库。有一个很好的简单扩展方法here，您可以稍微修改以符合您的要求，如下所示：

String.prototype.toHHMMSS = function () {

    var sec_num = parseInt(this, 10); // don't forget the second param
    var hours   = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);

    return hours+' hours '+minutes+' minutes '+seconds+' seconds';
}

您应该在网格初始化之前将其添加到您的页面。

然后，您需要为列创建一个模板，该模板会将扩展方法应用于该值。在下面的示例中，我首先将值乘以60，因为扩展方法使用秒而不是分钟：

<kendo-grid-column
              field="{{column}}"
              template="{{(column*60).toString().toHHMMSS()}}"
            >

注意：我不使用Angular，所以我不是100％确定模板语法是正确的，但我尝试使用JQuery Kendo网格，它运行良好。

Kendo UI角度格式时间

2 个答案: