VueJS에서 (null/비어 있음) 날짜 형식을 지정하는 방법

Vue.JS 1.0을 사용하면 비어있을 수있는 JSON 날짜를 올바르게 포맷하는 간단한 방법을 찾을 수 없습니다.VueJS에서 (null/비어 있음) 날짜 형식을 지정하는 방법

vue-filter npm packagedate filter으로 시도했지만 날짜가 비어 있으면 실패합니다. 예를 들어 내 데이터 인 경우 :

{ name: "John", birthday: null }, /* unknown birthday */ 
{ name: "Maria", birthday: "2012-04-23T18:25:43.511Z" },

반환

John 12/31/1969 9:00:00 PM <-- null date should be blank 
Maria 4/23/2012 3:25:43 PM <-- ok

내가 사용하고있는 코드 : 날짜를 포맷하는 적절한 방법을 무엇

<!DOCTYPE html><html> 
<head> 
    <script src="lib/vue/dist/vue.min.js"></script> 
    <script src="lib/vue-filter/dist/vue-filter.min.js"></script> 
</head> 
<body> 
<div id="app"> 
    <h1>Without Filter:</h1> 
    <div v-for="person in list"> 
     <div>{{person.name}} {{person.birthday}}</div> 
    </div> 
    <h1>With Filter:</h1> 
    <div v-for="person in list"> 
     <div>{{person.name}} {{person.birthday | date }}</div> 
    </div> 
</div> 
<script> 
    new Vue({ 
     el: "#app", 
     data: { 
      list: [ 
       { name: "John", birthday: null }, 
       { name: "Maria", birthday: "2012-04-23T18:25:43.511Z" }, 
      ] 
     } 
    }); 
</script> 
</body> 
</html>

도 쇼를 만들 것 date가 null 인 경우 비어 있지 않습니까?

출처

2016-09-01 Gerardo Grignoli

날짜 필터를 래핑 할 사용자 지정 필터를 작성하십시오. 입력이 null의 경우는, null를 돌려 그렇지 않으면 그것은 잘 작동하지 않습니다 Vue.filter('date')(input)

Vue.filter('dateOrNull', function(d, ...others) { 
 
    return d ? Vue.filter('date')(d, ...others) : null; 
 
}); 
 
new Vue({ 
 
    el: "#app", 
 
    data: { 
 
    list: [{ 
 
     name: "John", 
 
     birthday: null 
 
    }, { 
 
     name: "Maria", 
 
     birthday: "2012-04-23T18:25:43.511Z" 
 
    }, ] 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script> 
 
<script src="//rawgit.com/wy-ei/vue-filter/master/dist/vue-filter.min.js"></script> 
 
<div id="app"> 
 
    <h1>Without Filter:</h1> 
 
    <div v-for="person in list"> 
 
    <div>{{person.name}} {{person.birthday}}</div> 
 
    </div> 
 
    <h1>With Filter:</h1> 
 
    <div v-for="person in list"> 
 
    <div>{{person.name}} {{person.birthday | dateOrNull '%B'}}</div> 
 
    </div> 
 
</div>

출처

2016-09-01 19:17:59

dateOrNull에서 매개 변수를 전달하는 방법을 알고 있습니까? '{{person.birthday | dateOrNull '% B'}} ' –

현대 JS에는 스프레드 연산자가 있습니다. 업데이트 된 예제를 참조하십시오. 이전 JS는'Vue.filter ('date')를 적용 할 것입니다. apply (null, arguments)' –

더 많은 브라우저를 지원하기 위해서는 나중에 선호합니다. 감사! –

반환 :

로이 내가 질문을 정확하게 응답합니다. 그러나 그 vue-filter은 내 필요가 좋지 않다는 것이 밝혀졌습니다. 브라우저의 로케일 형식으로 날짜를 표시하려면 '%c'이 필요했습니다 (나쁜 생각). vue-filter 소스는 실제로 다음을 수행 하였다 (종속성을 피하기 위해, 독립 실행 형 필터로 rewrited) :

Vue.filter('date', function (d) { 
    var date = new Date(d); 
    return d ? date.toLocaleDateString() + ' ' + date.toLocaleTimeString().trim() : null; 
});

그것은 끔찍한 각 브라우저가 다르게 작동합니다. 그리고 알 수없는 시간대와 날짜는 UTC를 가정하고 GMT-3에서 생활 할 때이 원인이 지역의 시간대로 이동 :

새로운 계획 : 사용자 정의 필터

사용 Moment.js :

Vue.filter('moment', function (date) { 
    var d = moment(date); 
    if (!d.isValid(date)) return null; 
    return d.format.apply(d, [].slice.call(arguments, 1)); 
});

<script src='moment.js'>을 잊지 마세요.

사용법 : 또한 {{ date | moment "dddd, MMMM Do YYYY" }}

참조 : Moment Date and Time Format Strings

나는 또한 vue-moment NPM 패키지를 시도했지만이 CommonJS/require() 구문에 따라, 나는 이것을 위해 단지 웹팩/browserify을 사용하지 않으 ,

출처

2016-09-03 08:03:47

VueJS에서 (null/비어 있음) 날짜 형식을 지정하는 방법

답변

관련 문제