更改HH：MM的時間格式：SS

我有一個django（django-rest-framework）服務的api，它將一個電影對象及其相關信息返回到Vue應用程序中。其中一個信息是電影的持續時間。更改HH：MM的時間格式：SS

對象：

{ 
    "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.)

來源

2017-03-01 Benjamin Smith Max

我會建議使用moment.js任何日期/時間操縱或格式https://momentjs.com/ – anvk

這將是使用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');

來源

2017-03-01 18:57:25 Peter

我嘗試在全局主Vue中使用'filters'，但是我得到錯誤：[Vue warn]：無法解析過濾器：durationFormat（在匿名組件中找到 - 使用「name」選項更好地調試消息）。我已經更新了這個問題。現在我正在使用本地過濾器。你可能請給點建議嗎？但是，謝謝你的完整答案！ –

嗯...你在哪裏使用過濾器？在App組件模板中？如果是這樣，請嘗試在App組件本地註冊過濾器，或者使用'Vue.filter（）'全局註冊。我認爲問題在於你已經在根Vue實例中本地定義了過濾器，但正試圖在子組件中使用它。 – Peter

是的，我在本地Vue實例中使用了過濾器。謝謝。 –

你可以使用一些基本的JavaScript這樣的：

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

來源

2017-03-01 18:45:33 daniegarcia254

我只知道的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)); 
 
});

來源

2017-03-01 18:49:29

你可以使自己的模板標籤：

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 。

來源

2017-03-01 19:51:04 Ilko

您可以創建一個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>

來源

2017-03-01 20:13:34 Lemayzeur

更改HH：MM的時間格式：SS

回答

相關問題