Это вольный перевод замечательной статьи Date and time in JavaScript, автором которой является Dominik Wlazlowski.

Пока тикают часы и бегут дни на календаре, давайте поговорим о дате и времени в JavaScript. Здесь вы не найдёте много теории, скорее, тут будет больше практических примеров.

Объект Date

Для обработки дат в JavaScript существует объект Date.

Базовый пример:

var data = new Date();
document.write(data.getDate());

Объект Date - методы

Методы объекта Date:

data.getDay(); // номер дня (0-6)
data.getFullYear(); // 1000-9999
data.getHours(); // текущее значение часов
data.getMiliseconds(); // миллисекунды
data.getMinutes(); // минуты
data.getMonth(); // месяцы (0-11)
data.getSeconds(); // секунды

// преобразования в строку:
data.toDateString();
data.toLocaleDateString();
data.toLocaleString();
date.toString();

Совет: используйте instanceof

С помощью оператора instanceof мы можем проверить, имеем ли мы дело с объектом определённого типа. Например, давайте проверим, работаем ли мы с экземпляром объекта Date:

var my_date = new Date();
alert(my_date.getDate());

// 'my_date' - это экземпляр объекта Date?
alert(my_date instanceof Date);

Установка даты

При создании объекта Date, мы можем указать (установить) дату несколькими способами:

var today = new Date();
var birth = new Date("March 27, 1986 05:24:00");
alert(birth);

// или
var birth = new Date(1986,03,27);
var birth = new Date(1986,03,27,5,24,0);

Как вы уже заметили, мы можем установить только дату, или дату и час. Но мы также можем установить дату с помощью специализированных методов:

var dt = new Date();
dt.setFullYear(2012,02,12);

Этот код установит: год, месяц и день.

Например, для контраста, тут мы устанавливаем будущую дату (10 дней вперед):

var dt = new Date();
dt.setDate(dt.getDate() + 10);

Другие примеры

Пример — Измерение времени выполнения:

var start = Date.now();
// ... измеряемый код...
alert('test');
// ... конец измеряемого кода...

var stop = Date.now();
var diff = stop – start; // время в миллисекундах

Пример — Сравнение дат с помощью объекта Date:

var cmpDate = new Date();
cmpDate.setFullYear(2020,2,25);
var today = new Date();

// сравнение
if (cmpDate > today) {
  alert("Будущее");
} else {
  alert("Прошлое");
}

Довольно простой и эффективный способ.

Пример — Текущее время:

function getTime() {
  var now = new Date();
  var result = now.getHours() + ":" + now.getMinutes();

  return(result);
}
alert("Сейчас " + getTime());

Пример — Создание читаемой даты:

var tm = new Date();
var resTxt = '';
resTxt += "Сейчас " + tm.getHours() + ":"
       + tm.getMinutes() + ":" + tm.getSeconds() + ", ";

resTxt += "дата: " + tm.getDate() + "." + (tm.getMonth() + 1)
       + "." + tm.getFullYear();

alert(resTxt);

В случае с методом getMonth(), мы добавили к результату 1. Это нужно потому, что этот метод возвращает месяц числом, начиная с 0. Такая вот особенность JavaScript.

Есть ещё одна проблема — форматирование. Инструкция alert(resTxt); выдаст результат, который будет подобен следующему:

"Сейчас 21:47:3, дата: 16.8.2013"

Было бы здорово добавить недостающий '0' перед секундами и месяцем, чтобы получить результат в удобном для нас виде:

"Сейчас 21:47:03, дата: 16.08.2013"

Просто добавим условие в код, который генерирует финальную строку:

if (minute < 10) minute = "0" + minute;

Этот код мы увидим в следующем, чуть более сложном примере.

Пример — Собственная функция форматирования даты:

function showTime() {
  var monthsArr = ["Января", "Февраля", "Марта", "Апреля", "Мая", "Июня", 
  "Июля", "Августа", "Сентября", "Октября", "Ноября", "Декабря"];

  var daysArr = ["Воскресенье", "Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота"];

  var dateObj = new Date();

  var year = dateObj.getFullYear();
  var month = dateObj.getMonth();
  var numDay = dateObj.getDate();
  var day = dateObj.getDay();
  var hour = dateObj.getHours();
  var minute = dateObj.getMinutes();
  var second = dateObj.getSeconds();

  if (minute < 10) minute = "0" + minute;

  if (second < 10) second = "0" + second;

  var out = daysArr[day] + ", " + numDay + " " + monthsArr[month]
          + " " + year + ", " + hour + ":" + minute + ":" + second;

  return out;
}

alert(showTime());

После выполнения код будет отображать результат похожий на этот:

"Пятница, 16 Августа 2013, 22:00:57"

Это полный пример кода, который отображает дату и время в JavaScript. Он также демонстрирует, как действуют методы объекта Date.

Время и таймеры

Функция — setTimeout()

Здесь мы кратко поговорим о функции обратного отсчёта, а также как выполнить код по прошествии некоторого времени (функция setTimeout):

// Выполнение через 4 секунды (время в миллисекундах)
setTimeout(function() { alert("Foobar!") } , 4000);

К слову, иногда это очень полезно. Например, когда мы хотим вызвать какой-нибудь код из библиотеки, которая на данный момент ещё не полностью загружена. Или вызвать функцию, для работы которой, необходимо дождаться результатов работы другой части кода.

Для проверки того, что все работает должным образом, нужно вызвать наш код с задержкой.

Функция — setInterval()

Кроме того, программа может выполнять код несколько раз с помощью функции setInterval:

var countdown = 5;
var timer = setInterval(
  function() {
    countdown--;
    if (!countdown) {
      clearInterval(timer);
    }

    alert("Обратный отсчет: " + countdown);
  },
2000); // Частота: 2000 [ms] = 2 [s]

Функция в setInterval выполняется 5 раз с задержкой в 2 секунды (2000 миллисекунд), после прерывается.

Дополнительные примеры

Пример — Разница времени или сколько прошло времени между датами:

var dt_in = new Date(2007, 02, 11, 23, 59, 59);
var now = new Date();
var time = now.getTime() - dt_in.getTime();
var days = Math.floor(time / (1000 * 60 * 60 * 24));

if (days > 0) {
  alert("Прошло времени: " + days + " дней");
} else {
  alert("Указанная дата в будущем");
}

Пример — Вычисление возраста в JavaScript:

Для начала организуем простой пользовательский интерфейс в виде HTML-формы:

<body>
  <form>
    Месяц: <input type="text" id="b-month" />
    День: <input type="text" id="b-day" />
    Год: <input type="text" id="b-year" />
    <button onclick="getAgeFromBirthday()">Вычислить возраст</button>
  </form>
</body>

Код обработчика:

function getAgeFromBirthday() {
  var month = document.getElementById('b-month').value;
  var day   = document.getElementById('b-day').value;
  var year  = document.getElementById('b-year').value;

  var b_date = new Date(year, month, day);

  if (b_date.getDate() != day || b_date.getMonth() != month 
    || b_date.getFullYear() != year) {
    alert('Пожалуйста, введите правильную дату рождения');

    return false;
  }

  today = new Date();
  today.setHours(0);
  today.setMinutes(0);
  today.setSeconds(0);

  if (b_date > today) {
    alert('Вы из будущего или ещё не родились');
  
    return false;
  }

  alert(Math.floor((today - b_date) / 31556952000));
}

В этом примере мы получаем и обрабатываем дату рождения пользователя. В результате рассчитывается возраст пользователя, исходя из полученных от него данных.

Дата и время в JavaScript библиотеках

Используя различные библиотеки, мы ожидаем, что они предоставят нам упрощённый вариант написания кода. Это также относится к дате и времени.

Например, jQuery предлагает нам метод now():

jQuery.now(); // без аргументов, возвращает текущее время

Метод $.now() - это сокращение от выражения (new Date).getTime().

Библиотека MooTools предоставляет нам большие возможности операций над датой и временем в JavaScript, при этом используя минимум кода (например, методы: date.get(), date.set(), date.clone() или date.increment()).

При реализации календаря, мы можем написать его вручную, на так называемом "чистом JavaScript", при этом потратим кучу времени. С другой стороны, используя полезные для нас библиотеки, мы сократим время разработки.

Лучше эффективно использовать наше драгоценное время, нежели изобретать велосипед заново. При этом, мы будем использовать только проверенные, готовые и очень надёжные решения.

Особенно могу порекомендовать такие библиотеки:

Заключение

В этой статье мы узнали не только о работе с датой и временем на языке JavaScript, но и о множестве готовых решений, основанных на реальных примерах, а также поговорили о типичных элементах объектно-ориентированного программирования (ООП).

Для особо любопытных я бы рекомендовал более подробное описание объекта Date на MDN.

И теперь пришло время... чтобы закончить эту статью.

Спасибо за ваше время и внимание.