如何在 vue 组件中将日期时间格式更改为日期？答案

【问题标题】：How can I change format datetime to date in vue component?如何在 vue 组件中将日期时间格式更改为日期？
【发布时间】：2018-09-12 04:26:43
【问题描述】：

我的 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>

如果我console.log(datetime)，结果：2018-03-31 18:23:20

我只想获取日期并将格式更改为：2018 年 3 月 31 日

我尝试像上面的组件一样，但结果如下：2018/03/31

我尝试使用格式方法和日期格式方法，但它是未定义的

我该如何解决这个问题？

【问题讨论】：

看看这个库，我不知道你是否需要大量使用日期格式和转换，所以它可能不是你的最佳解决方案，但也许你会找到一些灵感你的具体问题:) github.com/datejs/Datejs
@Adriano 没有库还有其他方法吗？

标签： javascript jquery vue.js vuejs2 vue-component

【解决方案1】：

您可以使用toLocaleDateString() 获取日期。

如果没有以您想要的格式输出，那么您将需要使用以下方法进行自己的字符串连接

getDate(datetime) {

let date = new Date(datetime);

let dateString = `${date.getFullYear}/${date.getMonth() + 1}/${date.getDate}`

return date
}

【讨论】：

【解决方案2】：

最好的办法是使用Vue的filter属性和moment库：

Vue.filter('formatDate', function(value) {
  if (value) {
    return moment(String(value)).format('MM/DD/YYYY hh:mm')
  }
});

这样您就可以使用管道来格式化每个已呈现的日期：

<div>
    <p>{{ yourDate | formatDate}}</p>
</div>

有关更多示例，请查看以下链接：

【讨论】：

【解决方案3】：

没有库的最佳方式实际上取决于您的目标浏览器。看看下面的一些可能性。

// 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));

【讨论】：