更改 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 或 vuejs 或 javascript 中實現這一點？

更新：

嘗試使用全局過濾器

主.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（在匿名組件中找到 - 使用“名稱”選項以獲得更好的調試消息。）

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庫非常適合日期/時間解析和操作。

這是 codepen 中的示例（包括使用 moment.js） 。

更新（回應評論）

嘗試更新您的 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');

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

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

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>