HH：MM：SSの時刻形式を変更する

Question

私は、ムービーオブジェクトとその関連情報をVueアプリケーションに返すdjango（django-rest-framework）を提供するAPIを持っています。情報の1つはムービーの長さです。

オブジェクト：

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

コンポーネントテンプレート：

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

期間は、このフォーマットである

HH:MM:SS

eg: 02:22:08

しかし、私はそれが見えるようにしたいことは、このようにしている

2h 22m

これはdjangoまたはvuejsまたはjavascriptでこれを達成するにはどうしますか？

更新：コンポーネントテンプレート内の

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

：

がグローバルに

main.jsフィルタを使用してみました

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

をしかし、私はエラーを取得する：

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

Answer 1

これは、Vueのフィルタを使用するには良い場所でしょう。フィルターの詳細情報hereフィルタは、コンポーネントにグローバルまたはローカルに登録できます。ここで

はグローバルフィルタです：

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

そして、ここではあなたのテンプレートでそれを使用する方法は次のとおりです。

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

注：書式設定の機能をより堅牢にすることができます - これは単なるサンプルですあなたがVueでどのように使用されるのかを実演し始めることができます。コメントに記載されているように、moment.jsライブラリは、日付/時刻の解析と操作に本当に便利です。

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

更新（応答でコメントするには）

あなたのメインの更新をお試しください。jsがこのようにフィルタを登録するには：

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

次のようないくつかの基本的なJavaScriptを使用することができます：私は唯一の代わりにjavascriptのway.try形式（）メソッドを知っている

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

Answer 3

を。

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

独自のテンプレートタグ作ることができます。

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

をそしてテンプレートでそれを使用します。

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

詳細についてはDjango documentationに見えます。

Answer 5

djangoタグフィルタを作成することができます。あなたの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) 

あなたのDjangoテンプレート：

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