如何在VueJS中格式化(可能为空/空)日期
使用JSON1.0，我找不到一种简单的方法来正确格式化可以为空的Vue.JS日期。
我试过使用vue-过滤器npm包 date 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>格式化日期的正确方式是什么，如果日期为null，也会使显示为空白？
回答 2
Stack Overflow用户
发布于 2016-09-01 19:17:59
编写自定义筛选器来包装日期筛选器。如果输入为空，则返回空，否则返回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>
Stack Overflow用户
发布于 2016-09-03 08:03:47
不太好：
罗伊完全回答了我的问题。但事实证明，vue-filter并不适合，我的需求。我需要'%c'以浏览器的区域设置格式显示日期(糟糕的想法)。vue-filter源代码实际上执行了以下操作：(重新编写为独立筛选器，以避免依赖)：
Vue.filter('date', function (d) {
var date = new Date(d);
return d ? date.toLocaleDateString() + ' ' + date.toLocaleTimeString().trim() : null;
});这很糟糕:每个浏览器的工作方式都不同。而具有未知时区的日期则假定为UTC，并移至本地时区，因此在格林尼治时间-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" }}
另见：时刻日期和时间格式字符串
我也尝试过
vue-momentnpm包，但是它依赖于CommonJS/require()语法，我不想仅仅为此使用webpack/browserify，
https://stackoverflow.com/questions/39277428
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号