剑道UI角度格式时间

Question

我希望我在剑道网格中的时间被格式化为天、小时、分钟和秒，以显示某件事需要多长时间，而不是日期。例如：我希望125格式化为2h 5min或类似的东西。有没有可能？

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

Answer 1

首先，您需要创建自己的 Javascript 函数或导入一个将整数解析为小时、分钟和秒组件的库。这里有一个很好和简单的扩展方法，你可以稍微修改一下以满足你的要求，像这样：

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 网格尝试过，它工作正常。

Answer 2

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

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

后端：

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

用户界面：

<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>