更改 HH:MM:SS 的时间格式答案

【问题标题】：Change time format of HH:MM:SS更改 HH:MM:SS 的时间格式
【发布时间】：2017-07-21 05:24:24
【问题描述】：

我有一个与 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

例如：02:22:08

但我希望它看起来像这样

2 小时 22 米

有没有办法在 django 或 vuejs 或 javascript 中实现这一点？

更新：

尝试使用全局过滤器

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

组件模板内部：

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

但我得到一个错误：

[Vue 警告]：无法解析过滤器：durationFormat （在匿名组件中找到 - 使用“名称”选项更好地调试消息。）

【问题讨论】：

我建议使用 moment.js 进行任何日期/时间操作或格式 momentjs.com

标签： javascript django vuejs2 vue.js

【解决方案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 中使用它。如 cmets 中所述，moment.js 库非常适合日期/时间解析和操作。

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

更新（回应评论）

尝试更新您的 main.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');

【讨论】：

我尝试在主要的 Vue globaly 中使用 filters，但出现错误 [Vue warn]: Failed to resolve filter: durationFormat (found in anonymous component - use the "name" option for better debugging messages.)。我已经更新了这个问题。现在我在本地使用过滤器。你能不能给点建议？但是感谢您的完整回答！
嗯...您在哪里使用过滤器？在 App 组件模板中？如果是这样，请尝试在您的 App 组件中本地注册过滤器或使用Vue.filter() 全局注册过滤器。我认为问题在于您已经在根 Vue 实例中本地定义了过滤器，但正试图在子组件中使用它。
是的，我在根 Vue 实例中本地使用过滤器。谢谢。

【解决方案2】：

你可以像这样使用一些基本的javascript：

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

【讨论】：

【解决方案3】：

我只知道 javascript way.try format() 方法。

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

【讨论】：

【解决方案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。

【讨论】：

【解决方案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>

【讨论】：