Kendo UI Angular Format Time

Question

I want my time in Kendo Grid to be formatted in Day, Hours, Minutes and Seconds to show how long something takes, not the Date. So for instance: I want 125 to get formatted to 2h 5min or something like this. Is there any possibility?

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

Can you please provide more information about your data? You are saying that you do not want it to be formatted as Date, but then you give an example with an integer value. Do you have an integer column that always contains number of minutes? — Oggy, Aug 02 '17 at 13:43

Oggy · Accepted Answer · 2017-08-02T15:02:39.183

First you will need to either create your own Javascript function or import a library that parses an integer into hour, minute, and second components. There is good and simple extension method here, which you can slightly modify to fit your requirements, like this:

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';
}

You should add that to your page somewhere before your grid gets initialized.

Then you need to create a template for your column, which would apply the extension method to the value. In the following example I am multiplying the value by 60 first, because the extension method works with seconds instead of minutes:

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

note: I don't work with Angular, so I am not 100% sure that template syntax is correct, but I tried it with a JQuery Kendo grid and it worked fine.

score 0 · Answer 2 · answered Aug 02 '17 at 09:38

Below Date Formats are work for Chrome, IE not support all of them.AS per your requirement you can emit date part from the format.

Note: For kendo grid you have to apply format like date:'MM/dd/yyyy'

Backend:

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>

Thanks, but I want to get something like: ´3hours, 2minutes and 45second´ would this work with this solution? — Flo, Aug 02 '17 at 10:00

Kendo UI Angular Format Time

2 Answers2