Преобразование объекта даты в формат "ГГГГ/ММ/ДД" в JS

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию
В конце подарим скидку до 55% на обучение
Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

Быстрый ответ

Для того чтобы извлечь год, месяц и день из объекта Date, применяются методы getFullYear(), getMonth() и getDate(). Однако, следует учесть, что отсчет месяцев ведется с нуля:

JS
Скопировать код
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1; // в JavaScript месяцы считаются с нуля
const day = date.getDate();

console.log(year, month, day); // Выводит: ГГГГ, ММ, ДД

Формирование собственных форматов даты

Составьте полученные элементы даты в требуемом формате, следуя нижеприведенным указаниям:

JS
Скопировать код
const formattedDate = `${year}/${String(month).padStart(2, '0')}/${String(day).padStart(2, '0')}`;
console.log(formattedDate); // Выведет: ГГГГ/ММ/ДД

Таким образом, можно добавить лидирующие нули к однозначным числам дня и месяца для корректного отображения даты.

Работа с часовыми зонами

Часовые зоны зачастую становятся проблемой для разработчиков, однако с помощью метода toLocaleDateString() это легко решаемо:

JS
Скопировать код
const localDateOptions = { year: 'numeric', month: '2-digit', day: '2-digit', timeZone: 'America/New_York' };
const localFormattedDate = date.toLocaleDateString('en-US', localDateOptions);
console.log(localFormattedDate); // Выводит: ММ/ДД/ГГГГ

Опция timeZone позволяет точно задать нужную часовую зону.

В помощь форматированию дат: toLocaleDateString & toISOString

Методы toLocaleDateString и toISOString() способствуют форматированию дат без сложного манипулирования строками, выдавая их в формате ГГГГ/ММ/ДД:

JS
Скопировать код
const heroDate = date.toLocaleDateString('en-CA');
console.log(heroDate); // Выведет: ГГГГ/ММ/ДД

Визуализация

Объект Date представляет собой ключик к пониманию процесса времени:

JS
Скопировать код
const magicBox = new Date(); // Ключ к времени

К выборочному получению необходимых элементов даты пригодятся специальные методы:

Markdown
Скопировать код
| Метод            | предоставляет доступ к |
| ---------------- | ------------- |
| `.getFullYear()` | 🗓️ Год        |
| `.getMonth()`    | 🌜 Месяц      |
| `.getDate()`     | 📅 День       |

Вы управляете временем:

Markdown
Скопировать код
🔒🔓: [🗓️ 2023, 🌜 4, 📅 15]
// И вот, время раскрывает свои тайны

Работа с нестандартными форматами даты

Для обработки нетипичных строковых представлений дат можно создать объект Date:

JS
Скопировать код
const rogueDate = new Date('May the 4th be with you, 2023'); // Например, дата может подаваться в забавном формате, напоминающем "Звездные войны"
console.log(rogueDate.toLocaleDateString('en-CA')); // Выведет: 2023/04/15

Отладка и тестирование

Протестируйте разные форматы дат, чтобы избежать ошибок:

JS
Скопировать код
const testFormats = () => {
  const testDate = new Date('May the 4th be with you, 2023');
  console.log(testDate.toLocaleDateString('en-US')); // Американский формат
  console.log(testDate.toLocaleDateString('en-CA')); // Канадский формат
  console.log(testDate.toISOString().split('T')[0].replace(/-/g, '/')); // Формат ISO.
};

testFormats();

Полезные материалы

  1. Date.prototype.getFullYear() – JavaScript | MDN — Детализированная информация о методе getFullYear().
  2. Date.prototype.getMonth() – JavaScript | MDN — Подробности о getMonth() и особенностях его исчисления с нуля.
  3. Date.prototype.getDate() – JavaScript | MDN — Углубленное изучение getDate().
  4. How do I format a date in JavaScript? – Stack Overflow — Опыт сообщества по вопросу форматирования дат.
  5. Everything You Need to Know About Date in JavaScript | CSS-Tricks — Исчерпывающий обзор работы с датами в JavaScript.
  6. GitHub – date-fns/date-fns: ⏳ Современная JavaScript-библиотека для работы с датами — Мощные инструменты для решения задач, связанных с датами.
  7. Moment.js | Home — Moment.js для комфортной работы с моментами во времени.