Change time format of HH:MM:SS

Question

I have an api served with django (django-rest-framework) which return a movie object and its related information into a Vue app. One of the information is the movie duration.

object:

{
    "movie_id": 13,
    "duration": "17:52:14",
    ...
    ...
},

component template:

<div id="movieDetailSynopsis">
    ...
    ...
    <p>Duration: {{movie.duration}}</p>
</div>

The duration is in this format

HH:MM:SS

eg: 02:22:08

But what I want it to look like is in this way

2h 22m

Is there anyway to achieve this in django or vuejs or javascript?

update:

Tried using filter globaly

main.js:

new Vue({
    router,
    components: {App},
    template: '<App/>',
    store,
    filters: {
        durationFormat(value) {
            const duration = moment.duration(value);
            return duration.hours() + 'h ' + duration.minutes() + 's';
        }
    }
}).$mount('#app');

inside the component template:

<div id="movieDetailSynopsis">
    ...
    ...
    <p>Duration: {{movie.duration | durationFormat}}</p>
</div>

But I get an error:

[Vue warn]: Failed to resolve filter: durationFormat (found in anonymous component - use the "name" option for better debugging messages.)

Answer 1

This would be a good place to use a Vue filter. More info on filters here. You can register a filter globally or locally in your component.

Here's a global filter:

Vue.filter('formatTime', function(value) {
  if (value) {
    const parts = value.split(":");
    return +parts[0] + "h " + +parts[1] + "m";
  } else {
    return "unknown"
  }
});

And here's how you would use it in your template:

<p>Duration: {{movie.duration | formatTime}}</p>

Note: you can make the formatting function more robust - this is just a sample to get you started and demonstrate how it could be used in Vue. As mentioned in the comments, the moment.js library is really good for date/time parsing and manipulation.

Here's a sample (including using moment.js) in codepen.

Update (in response to comment)

Try updating your main.js to register the filter like this:

// register global filter
Vue.filter('durationFormat', function(value) {
  const duration = moment.duration(value);
  return duration.hours() + 'h ' + duration.minutes() + 's';
});

new Vue({
    router,
    components: {App},
    template: '<App/>',
    store,
}).$mount('#app');

Answer 2

You could use some basic javascript like this:

var time = "02:22:08";
var timeConverted = parseInt(t.split(':')[0]) + 'h' + ' ' + parseInt(t.split(':')[1]) + 'm';

Answer 3

I only know javascript way.try format() method instead.

function format(time){
        return time.replace(/(?:0)?(\d+):(?:0)?(\d+).*/,'$1h $2m');
}

["23:12:15","02:03:05"].forEach(function(time){
  console.log(time+" ==> "+format(time));
});

Answer 4

You can make your own template tag:

from django import template

register = template.Library()

@register.simple_tag
def convert_time(value):
    t_list = [t for t in value.split(':')]
    return '{}h {}m'.format(int(t_list[0]), t_list[1])

And then use it in template:

{% load your_tags %}
<div id="movieDetailSynopsis">
  ...
  ...
  <p>Duration: {{movie.duration|convert_time}}</p>
</div>

For more information look in Django documentation.

Answer 5

You may create a django tag filter. Your tagfilter.py

from django import template
register = template.Library()

@register.filter
def tagFilter(duration):
    d = duration.split(":")
    hh,mm,ss = d[0],d[1],d[2]
    return "%sh %sm %ss" % (hh,mm,ss) # If you don't want to show the seconds, you may remove it:
    # "%sh %sm" % (hh,mm)

Your django template:

<div id="movieDetailSynopsis">
...
...
<p>Duration: {{movie.duration|tagFilter}}</p>