javascript 如何在 vue 组件中将格式日期时间更改为日期？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49619999/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I change format datetime to date in vue component?
提问by Success Man
My vue component like this :
我的 vue 组件是这样的：
<template>
...
<td>{{getDate(item.created_at)}}</td>
...
</template>
<script>
export default {
...
methods: {
getDate(datetime) {
let date = new Date(datetime).toJSON().slice(0,10).replace(/-/g,'/')
return date
}
}
}
</script>
If I console.log(datetime), the result : 2018-03-31 18:23:20
如果我console.log(datetime)，结果：2018-03-31 18:23:20
I want to get only date and change the format to be : 31 Mar 2018
我只想获取日期并将格式更改为：2018 年 3 月 31 日
I try like my component above, but the result like this : 2018/03/31
我尝试像上面的组件一样，但结果是这样的：2018/03/31
I try use format method and dateformat method, but it is undefined
我尝试使用格式方法和日期格式方法，但未定义
How can I solve this problem?
我怎么解决这个问题？
采纳答案by acdcjunior
The best way without a lib really depends on the browser you target. See some possibilities below.
没有库的最佳方式实际上取决于您的目标浏览器。请参阅下面的一些可能性。
// IE 11 or later
function format(date) {
var month = date.toLocaleString("en-US", { month: 'short' })
return date.getDate() + ' ' + month + ' ' + date.getFullYear();
}
// Pretty much every browser
function formatCompat(date) {
var ms = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
return date.getDate() + ' ' + ms[date.getMonth()] + ' ' + date.getFullYear();
}
var d1 = new Date("2018-04-11T12:00:00.000Z");
console.log(format(d1));
console.log(formatCompat(d1));
var d2 = new Date("2010-01-01T12:00:00.000Z");
console.log(format(d2));
console.log(formatCompat(d2));回答by Charles Barnes
You can get the Date by using toLocaleDateString().
您可以使用toLocaleDateString().
If that does not output in the format that you would like then you will want to make your own string contcatenation by using the following
如果这没有以您想要的格式输出，那么您将需要使用以下内容进行自己的字符串连接
getDate(datetime) {
let date = new Date(datetime);
let dateString = `${date.getFullYear}/${date.getMonth() + 1}/${date.getDate}`
return date
}
回答by Luis Limas
The best way is to use the filterproperty of Vue and momentlibrary:
Vue.filter('formatDate', function(value) {
if (value) {
return moment(String(value)).format('MM/DD/YYYY hh:mm')
}
});
That way you can use a pipe to format every date that has been rendered:
这样您就可以使用管道来格式化已呈现的每个日期：
<div>
<p>{{ yourDate | formatDate}}</p>
</div>
For a more samples look at the following links:
有关更多示例，请查看以下链接：
