Question

我从数据库中以2018-08-08 15:38:48格式接收日期，但是我希望它显示3:38 pm。

我只是不确定何时进行此更改，可以在发布时进行更改吗？它们是邮件发送给某人的日期。

当前代码：

<div v-for="messages in userMessages">
   <div class="date">
       {{ user.created_at }}
   </div>
</div>

输出：

2018-08-08 15:38:48

如何转换Vue中的日期？（当它在v-for中时？）

Answer 1

Vue不提供日期格式。您将需要自己的过滤器来格式化日期。或者您使用类似以下的程序包：https://github.com/brockpetrie/vue-moment#readme

<span>{{ someDate | moment("hh:mm a") }}</span>

Answer 2

Vue.js本身不允许以其他方式格式化日期。

我建议您使用moment.js等更著名的库来设置日期格式。

例如：

import moment from 'moment'

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

Answer 3

https://momentjs.com/

您如何使用它？

您可以这样使用。

moment('2018-08-08 15:38:48').format('LTS'); // 03:38:48 PM

Answer 4

您的日期时间格式不是我们想要的ISO标准，但是我们将继续使用它...处理日期时，最好在收到日期后将其转换为日期对象。如果他们要使用JSON，则可以使用reviver函数作为JSON.parse（）的第二个参数来执行此操作。这是一个恢复器功能，可以为您完成这项工作...

然后，在需要显示的那一点上，可以使用toLocaleTimeString（）格式化时间

function nReviver(key, value) {
        var a;
        if (typeof value === "string") {
            a = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}(?:\.\d*)?$/.exec(value);
            if (a) {
                return new Date(a[0]);
            }
        }
        return value;
    }
    
    // do this when you receive your data from the server and all
    // dates, wherever they are in the JSON, will be converted to date objects
    var myObj = JSON.parse('{"myDate":"2018-08-08 15:38:48"}',nReviver)

    // ...then, when you want to display, format with toLocaleTimeString()
    console.log(
      myObj.myDate.toLocaleTimeString({},{
        hour12:true,
        hour:'numeric',
        minute:'numeric'
      })
      .toLowerCase()
    )

将数据库日期格式化为AM / PM时间（vue）

4 个答案: