更改时间格式为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，例如02:22:08。但我想要的格式是2小时22分钟。有没有办法在Django、Vue.js或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 (在匿名组件中找到 - 使用 "name" 选项以获取更好的调试信息。)

- Benjamin Smith Max

---

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

Answer 1

这是一个使用Vue过滤器的好地方。关于过滤器的更多信息请参见此处。您可以在组件中全局或本地注册一个过滤器。

以下是一个全局过滤器示例：

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库非常适合日期/时间解析和操作。

这里有一个样例（包括使用moment.js）在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');

- Peter

---

我尝试在Vue的全局中使用filters，但是我遇到了错误[Vue warn]: Failed to resolve filter: durationFormat (found in anonymous component - use the "name" option for better debugging messages.)。我已经更新了问题。现在我正在本地使用filters。你能否给一些建议吗？非常感谢你的完整回答！ - Benjamin Smith Max

嗯...你在哪里使用过滤器？在App组件模板中吗？如果是这样，请尝试在您的App组件中本地注册过滤器，或者全局使用Vue.filter()进行注册。我认为问题在于您已经在根Vue实例中定义了过滤器，但是正在尝试在子组件中使用它。 - Peter

是的，我在根Vue实例中本地使用了过滤器。谢谢。 - Benjamin Smith Max

Answer 2

我只知道JavaScript的方法。尝试使用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));
});

- holi-java

Answer 3

你可以使用一些基本的JavaScript，例如：

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

- daniegarcia254

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文档。

- Ilko

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>

- Lemayzeur