Как форматировать дату?

Question

[qwentry]

Получаю дату в формате 2020.06.01, ее нужно перевести в формат 1 Июня 2020. Как это сделать?

Comments

[Максим]

moment js

[Mikhail Osher]

Такие задачки вообще самому надо уметь щёлкать. Иди на codewars и возьмите 3-4 kyu.

Answer 1

[FinGanapre]

Date
toLocaleString
как сделать фильтр для vue

код

upd: так будет работать кроссбраузерно только с ISO датами. Не подойдёт для решения вашего варианта.

const date = new Date('2020.06.01').toLocaleString('Ru-ru', {day: 'numeric', month: 'long', year: 'numeric'})

upd: из комментариев. Преобразуйте регуляркой.
replace

const date = new Date(
'2020.06.01'.replace(/\./g, '-') + 'T00:00:00.000Z'
).toLocaleString(
'Ru-ru', {
  day: 'numeric',
  month: 'long',
  year: 'numeric'
})

Comments

[Сергей Соколов]

"Invalid Date"

spoiler

FireFox

>> const date = new Date('2020.06.01').toLocaleString('Ru-ru', {day: 'numeric', month: 'long', year: 'numeric'})
<< undefined
>> date
<< "Invalid Date"

[FinGanapre]

Сергей Соколов, ага, с не ISO датами так себе. А жаль. Спасибо за поправку:)

[Aetae]

FinGanapre, ну если приходящий формат гарантирован, то всегда можно превратить в ISO:

new Date(
  '2020.06.01'.replace(/\./g, '-') + 'T00:00:00.000Z'
).toLocaleString(
  'Ru-ru', {
    day: 'numeric', 
    month: 'long', 
    year: 'numeric'
  }
);

[FinGanapre]

Aetae, Ещё лучше с бэка всегда iso отправлять, как я и поступаю:) Спасибо за вариант:)

[Сергей Соколов]

FinGanapre, тоже недавно встретилось, что с бэка шлют дату в ISO, и мне это не понятно. Почему ISO предпочли одному целому числу: Unix timestamp?

[FinGanapre]

Сергей Соколов, Unix тож ок, но его придётся умножать на 1000 на фронте. А iso я просто передал и радуюсь жизни. codepen. Ну а так, можно разные форматы выдавать по требованию. И основной формат выбирать другой.

Answer 2

[0xD34F]

moment.js:

moment.locale('ru');

const formatDate = dateStr => moment(dateStr, 'YYYY.MM.DD').format('D MMMM YYYY');

data: () => ({
  dateStr: '2020.06.01',
}),
computed: {
  formattedDate() {
    return formatDate(this.dateStr);
  },
},
methods: {
  formatDate1: formatDate,
},
filters: {
  formatDate2: formatDate,
},

<div>{{ formattedDate }}</div>
<div>{{ formatDate1(dateStr) }}</div>
<div>{{ dateStr | formatDate2 }}</div>

https://jsfiddle.net/j5ubmtnL/

Answer 3

[Сергей Соколов]

const months_RU = 'Января,Февраля,Марта,Апреля,Мая,Июня,Данунаф,Лень,Дальше,Сами'
  .split(',');
const parseDate = d => d.split('.')
  .reduce((acc, c, i) => (acc.unshift(i & 1 ? months_RU[+c - 1] : +c), acc), [])
  .join(' ');

Использование: parseDate('2020.06.01') // "1 Июня 2020"

Как это работает:
По точкам разбить в массив строк ['2020', '06', '01'];
собрать в массив задом-наперёд (день, месяц, год) – вставить в начало массива .unshift();
Месяц – элемент нечётный, последний бит = 1, проверка i & 1 вернёт 1 только для месяца;
месяц заменить на название из массива. Там нумерация с 0, поэтому -1.
Остальные (год и дату) просто сделать из строки – числом, через унарный оператор +
Получится массив [1, 'Июня', 2020]
Склеить его элементы в строку через пробел: join(' ')

Answer 4

[Mikhail Osher]

const months = {
  1: 'Января',
  2: 'Февраля',
  3: 'Марта',
  4: 'Апреля',
  5: 'Мая',
  6: 'Июня',
  7: 'Июля',
  8: 'Августа',
  9: 'Сентября',
  10: 'Октября',
  11: 'Ноября',
  12: 'Декабря',
};

function formatDate(date) {
  const [dd, mm, yyyy] = date.split('.');

  return `${dd} ${months[Number(mm)]} ${yyyy}`;
}

console.log(formatDate('01.06.2020'));