H Дата и время в JavaScript в черновиках Перевод

Для работы с датами в JS есть объект 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

При помощи него можно проверить, работаем ли мы с объектом. К примеру, проверим, работаем ли мы с экземпляром объекта 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);

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

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

… мы задаём дату в будущем (на 10 дней вперёд)

Ещё примеры

Измеряем время выполнения программы

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

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

Сравниваем даты

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. Это особенность JS.

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

“Сейчас у нас 21:47:3, на дату: 16.8.2013″

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

“Сейчас у нас 21:47:03, на дату: 16.08.2013″

Давайте добавим условий в код, создающий финальную строку, вроде:

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

Такой код мы увидим в следующем примере.

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

function showTime() {
  var monthsArr = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", 
  "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

  var daysArr = ["Sat", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

  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());

Код выведет результат такого вида:

“Fri, 16 Aug 2013, 22:00:57″

Пример полностью достаточен для вывода даты и времени в JS. Кроме этого, он показывает, как работать со значениями, которые возвращают методы объекта Date.

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

Функция setTimeout()

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

// выполнить через 4 секунды
setTimeout(function() { alert("Опаньки!") } , 4000);

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

Функция setInterval()

Также программа может исполнять код через равные промежутки времени:

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

    alert("Обратный отсчёт: " + countdown);
  },
2000); // как часто повторять: 2000 [мс] = 2 [с]

Функция выполняется 5 раз каждые 2 секунды.

Ещё примеры

Вычисление разницы во времени между датами

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 + " days");
} else {
    alert("Заданная дата находится в будущем ");
}

Подсчёт возраста в JS

Простая 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('Please enter a valid date of birth');
 
        return false;
    }

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

    if (b_date > today) {
        alert('The date must be earlier than today');
        
        return false;
    }

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

В примере мы обрабатываем заданные пользователем дату и время рождения. Результат – возраст пользователя.

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

Фреймворки предоставляют разные возможности в сокращении кода, в том числе при работе с датами.

К примеру, у jQuery есть метод now().

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

Метод $.now() — короткая запись выражения (new Date).getTime().

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

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

— Date Picker from jQueryUI
— MooTools DatePicker solution

> new Date() instanceof Object
true

Date.now();
+new Date();