Date.setFullYear() в JavaScript — встановити рік дати

Загальний опис

Date.prototype.setFullYear() — це метод для зміни року в існуючому об'єкті Date в JavaScript. Він дозволяє точно налаштовувати дати, коректуючи інші частини дати за необхідністю, що робить його незамінним для динамічної роботи з календарями, планувальниками та іншими додатками, де дати відіграють ключову роль.

Припустимо, вам потрібно встановити дату на 1 січня наступного року:

let today = new Date();
today.setFullYear(today.getFullYear() + 1, 0, 1);
console.log(today);

Ще одна цікава особливість полягає в корекції невірних дат. Якщо ви намагаєтеся встановити неіснуючу дату, таку як 30 лютого, метод автоматично коригує її:

let someDate = new Date(2022, 0, 31); // 31 січня 2022
someDate.setFullYear(2023, 1, 30); // Намагаємося встановити 30 лютого 2023
console.log(someDate); // Ви побачите 2 березня 2023

В інтерактивних застосуваннях метод Date.prototype.setFullYear() може бути використаний для створення динамічних календарів, де користувач може обирати рік. Наприклад, при виборі року у випадаючому меню, JavaScript може автоматично оновлювати дату, використовуючи цей метод.

правити

Порада

Для більш складних обчислень чи порівнянь дат, розгляньте можливість використання числового результату методу Date.prototype.setFullYear() - мітки часу. Це може допомогти при порівнянні дат або при виконанні математичних операцій з датами.

автор: Bond правити

Порада

Хоча це може здатися простим для початківців, важливо пам'ятати, що об'єкти Date в JavaScript працюють у локальному часовому поясі. При маніпулюванні датами, зокрема при використанні методу Date.prototype.setFullYear(), можливі розбіжності часових поясів при обміні даними між сервером і клієнтом.

автор: Bond правити

Порада

Якщо вам потрібно виконувати операції з великою кількістю об'єктів Date, розгляньте можливість використання зовнішніх бібліотек, таких як Moment.js або Luxon. Ці бібліотеки надають більше можливостей та оптимізацій для роботи з датами та часом.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

setFullYear(yearValue)
setFullYear(yearValue, monthValue)
setFullYear(yearValue, monthValue, dateValue)

Параметри

yearValue

Ціле число, що представляє рік. Наприклад, 1995.

автор: Bond

правити

monthValue

Ціле число, що представляє місяць: 0 для січня, 1 для лютого тощо.

автор: Bond

правити

dateValue

Ціле число від 1 до 31, що представляє день місяця. Якщо ви вказуєте dateValue, вам також потрібно вказати monthValue.

автор: Bond

правити

Повернення

timestamp

Метод змінює об'єкт Date на місці та повертає його новий часовий штамп (timestamp). Якщо параметр є NaN (або іншими значеннями, які конвертуються в NaN, наприклад, undefined), дата встановлюється як "Invalid Date" і повертається NaN.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	4	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<header>
  <h2 class="title">Date.prototype.setFullYear()</h2>
  <p class="description">Змінює рік дати, при цьому зберігаючи місяць та день місяця.</p>
</header>
<main>
  <div class="result">
    <p>Поточна дата: <span id="currentDate">Loading...</span></p>
    <label for="yearInput">Введіть новий рік: </label>
    <input type="number" id="yearInput" min="1900" value="2000">
    <button onclick="changeYear()">Змінити рік</button>
    <p>Змінена дата: <span id="changedDate">Loading...</span></p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

button {
  margin-left: 10px;
}

window.onload = function () {
  const currentDateElem = document.getElementById("currentDate");
  const changedDateElem = document.getElementById("changedDate");
  let date = new Date();

  currentDateElem.textContent = date.toDateString();

  window.changeYear = function () {
    const yearInput = document.getElementById("yearInput").value;
    date.setFullYear(yearInput);
    changedDateElem.textContent = date.toDateString();
  };

  changeYear();
};
//# sourceURL=pen.js

let someDate = new Date(2010, 5, 15); // Дата: 15 червня 2010 року

// Змінюємо рік для someDate на поточний
let currentYear = new Date().getFullYear();
someDate.setFullYear(currentYear);

console.log(someDate); // Дата: 15 червня поточного року (залежно від року виконання коду)

let startDate = new Date(2022, 0, 1); // Дата: 1 січня 2022 року

// Додаємо до startDate 5 років
let addedYears = 5;
startDate.setFullYear(startDate.getFullYear() + addedYears);

console.log(startDate); // Дата: 1 січня 2027 року