Как выводить дату текущую в таком формате 2020-10-29?

Question

Мой пример вывод даты

beforeDestroy() {
        clearInterval(this.interval)
    },
    created() {
        this.interval = setInterval(() => {
            this.date = new Date()
        }, 1000);

    }

template

<b-col class="font-weight-bold time-title">{{date | date('time')}}</b-col>
<b-col class="data-title">{{date | date('date')}}</b-col>

Функция експорт

export default function dateFilter(value, format= 'datetime') {
// console.log(value);
const options = {}

if (format.includes('date')) {
    options.day = 'numeric'
    options.month = '2-digit'
    options.year = 'numeric'
}

if (format.includes('time')) {
    options.hour = '2-digit'
    options.minute = '2-digit'
    // options.second = '2-digit'
}
return new Intl.DateTimeFormat('uk-UK', options).format(new Date(value))

}

Answer 1

Вся логика работы Intl.DateTimeFormat хорошо описана в документации mozilla и learn javascript. Что касается форматирования, то это объемный процесс с настройкой Intl.DateTimeFormat.prototype.format. Если вы не хотите углубляться в тонкости настройки и просто работать с датами, то воспользуйтесь пакетом date-fns.

Использование фильтров в Vue 3 имеет статус deprecated, для многих момент спорный, но если планируется миграция, то переносите всё в функции хэлперы уже сейчас:

import formatDate from './filter/formatDate';

setup () {
  // тут логика компонента
  return {
    formatDate, // далее в темплейте просто использовать как метод
  }
}

БЛОГ НА HUSL

Как выводить дату текущую в таком формате 2020-10-29?

Ответы (1 шт):