geometria
@geometria

Как в Vue правильно отобразить дату и время?

<div class="fullDate">{{new Date().getDate()+'.'+ (new Date().getMonth()+1)+'.'+ new Date().getFullYear()+' '+new Date().getHours()+':'+new Date().getMinutes()}}</div>

Этот код отображает:
1.2.2020 12:1
А хотелось привести к человеческому виду:
01.02.2020 12:01
Как это сделать, не подключая дополнительных библиотек?
  • Вопрос задан
  • 5092 просмотра
Решения вопроса 1
Kozack
@Kozack Куратор тега Vue.js
Thinking about a11y
Вот как это делать согласно лучших практик:
<template>
<div>
    <!-- В шаблоне не вызывают какие-либо функций. Только выводят готовые значения -->
    {{localeDate}}
</div>
</template>

<script>
{
    data: () => ({
        // Дата хранится в виде числа. Не обязательно в state компонента. Но и в других местах тоже
        date: 1580558031264,
    }),
    
    computed: {
        localeDate() {
            // Конвертируем число в строку. Для этого существуют специальные методы
            // toLocaleDateString() или toLocaleString() или toLocaleTimeString()
            // Итоговая строка будет зависеть от локализации системы пользователя. 
            // Для русской локали это будет "01.02.2020", 
            // для американской "2/1/2020", 
            // для немецкой — "1.2.2020"
            // Вы НЕ должны устанавливать формат даты самостоятельно
            return (new Date(this.date)).toLocaleDateString() 
        },
    },

    // Если нужно изменять дату в реальном времени вешаем таймер
    created() {
        this.intervalId = setInterval(() => this.date = Date.now(), 1000); // Обновляем значения не чаще раза в секунду. А то и реже.
    },

    // Если повесили таймер, то его нужно отключать
    beforeDestroy() {
        if (this.intervalId) clearInterval(this.intervalId)
    },
}
</script>
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
0xD34F
@0xD34F Куратор тега Vue.js
Фильтр или метод сделайте:

data: () => ({
  date: new Date(),
}),
filters: {
  formatDate1: d => d.toLocaleString('ru-RU').replace(',', '').slice(0, -3),
},
methods: {
  formatDate2: d => d.toLocaleString('ru-RU').replace(',', '').slice(0, -3),
},

<div class="fullDate">{{ date | formatDate1 }}</div>
<div class="fullDate">{{ formatDate2(date) }}</div>
Ответ написан
delphinpro
@delphinpro
frontend developer
Сначала общий запрос для понимания проблемы: https://yandex.ru/search/?text=js%20format%20date
Потом более частный для осознания, что в vue из коробки нет методов форматирования даты https://yandex.ru/search/?text=vue%20format%20date
Когда дойдет, что нужно либо использовать готовые сторонние решения, либо пилить самому, читать до просветления https://learn.javascript.ru/datetime
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы