更改HH：MM的时间格式：SS

Question

我有一个django（django-rest-framework）服务的api，它将一个电影对象及其相关信息返回到Vue应用程序中。其中一个信息是电影的持续时间。

对象：

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

分量模板中：

使用过滤器globaly

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这样的：

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

Answer 3

我只知道的JavaScript way.try格式（）方法来代替。

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>