Форматирование даты базы данных по времени am / pm (vue)

Я получаю даты из своей базы данных в формате 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?)

Этот вопрос дает вам представление о том, как вы можете форматировать строки даты с помощью JavaScript в vue. Это не ваш вариант использования, но вы можете начать здесь.
Philipp Maurer 10.08.2018 15:45
0
1
2 807
4

Ответы 4

Vue не поддерживает форматирование даты. Вам понадобится собственный фильтр для форматирования даты. Или вы используете такой пакет: https://github.com/brockpetrie/vue-moment#readme

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

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')
  }
}

https://momentjs.com/

Как Вы этим пользуетесь?

Вы можете использовать вот так.

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

Ваш формат даты и времени не является стандартом ISO, который мы хотели бы, но мы будем жить с ним ... При обработке дат рекомендуется преобразовывать их в объекты даты, как только вы их получите. Если они прибывают в формате JSON, вы можете сделать это с помощью функции оживления в качестве второго аргумента 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()
    )

Другие вопросы по теме