Zeitformat von HH ändern: MM: SS

Question

Ich habe eine API mit django (django-rest-framework) geliefert, die ein Filmobjekt und die zugehörigen Informationen in eine Vue App zurückgibt. Eine der Informationen ist die Filmdauer.

Objekt:

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

Komponente Vorlage:

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

Die Dauer ist in diesem Format

HH:MM:SS

eg: 02:22:08

Aber was will ich es wie auf diese Weise suchen

2h 22m

Gibt es trotzdem, um dies in Django oder Vuejs oder Javascript zu erreichen?

Update:

Versuchte Filter mit 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'); 

innerhalb der Komponentenvorlage:

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

Aber ich erhalte eine Fehlermeldung:

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

Answer 1

Dies wäre ein guter Ort, um einen Vue-Filter zu verwenden. Weitere Informationen über Filter here. Sie können einen Filter global oder lokal in Ihrer Komponente registrieren.

Hier ist ein globaler Filter:

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

Und hier ist, wie Sie es in Ihrer Vorlage verwenden würde:

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

Hinweis: Sie können machen die Formatierungsfunktion robuster - das ist nur eine Probe um zu beginnen und zu demonstrieren, wie es in Vue verwendet werden könnte. Wie in den Kommentaren erwähnt, ist die moment.js-Bibliothek wirklich gut für das Parsing und die Manipulation von Datum und Uhrzeit.

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

Update (als Antwort auf Kommentar)

Versuchen Sie, Ihre Haupt-Update.js die Filter wie folgt registrieren:

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

Sie könnten einige grundlegende Javascript wie folgt verwenden:

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

Answer 3

Ich weiß nur, Javascript way.try Format() -Methode statt.

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

Sie können Ihren eigenen Template-Tag machen:

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

Und dann ist es in Vorlage:

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

Für weitere Informationen schauen Sie in Django documentation .

Answer 5

Sie können einen Django-Tag-Filter erstellen. Ihre 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) 

Ihre django Vorlage:

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