HH의 시간 형식 변경:MM:SS

HH의 시간 형식 변경:MM:SS

영화 사물과 관련 정보를 Vue 앱으로 돌려주는 django(django-rest-framework)가 제공되는 api를 가지고 있다.그 정보 중 하나는 영화 상영시간이다.

객체:

{
    "movie_id": 13,
    "duration": "17:52:14",
    ...
    ...
},

구성 요소 템플릿:

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

기간은 이 형식이다.

HH:MM:SS

예: 02:22:08

하지만 내가 원하는 것은 이런 식이다.

시속 22m

장고나 부에즈나 자바스크립트로 이것을 성취할 수 있는 방법이 있는가?

업데이트:

필터 전역 사용 시도

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>

하지만 오류가 생겼어:

[부유 경고]:필터를 확인하지 못함: durationFormat(익명 구성 요소에 있음 - 메시지를 더 잘 디버깅하려면 "name" 옵션을 사용하십시오.)

이곳은 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 사용 포함)이 있다.

업데이트(주석에 응답)

필터를 다음과 같이 등록하려면 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');

다음과 같은 기본적인 자바스크립트를 사용할 수 있다.

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

나는 대신 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));
});

템플릿 태그를 직접 만들 수 있음:

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 태그 필터를 생성할 수 있다.네 태그필터.파이를 치다

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>

참조URL: https://stackoverflow.com/questions/42539266/change-time-format-of-hhmmss