Js получить текущую дату. JQuery плагины форм для указания времени и даты

Получить текущую дату в JavaScript очень просто. Для этого предназначен объект Date . Его синтаксис достаточно прост, а имена методов интуитивно понятны. В приведенных ниже примерах я покажу, как работать с объектом Date (JavaScript new date ), чтобы получить текущие год, месяц, день и время с точностью до миллисекунды!

Получение текущей даты:

Чтобы получить в JavaScript текущую дату, используйте ключевое слово new для создания нового экземпляра объекта Date .

var date = new Date(); console.log(date);

Этот код выводит на консоль следующую информацию:

//Tue Feb 02 2016 15:46:56 GMT-0500 (Eastern Standard Time)

Здесь отображается текущий день недели, текущий месяц, день месяца, год и даже текущее время в 24-часовом формате. Фрагмент «GMT » означает время по Гринвичу, а «-0500 » — это разница в часовых поясах между местным временем и GMT .

Цитата из Википедии : «Среднее время по Гринвичу (GMT ) — это среднее солнечное время в Королевской обсерватории в Гринвиче, Лондон.» Это связано с универсальным координированным временем (UTC ). «Eastern Standard Time » в выведенном значении даты относится к временной зоне вашего браузера или компьютера.

* Обратите внимание, что GMT и UTC различаются между собой. Мы будем рассматривать значения UTC в минутах.

* Также обратите внимание, что дата в JavaScript определяется временем в миллисекундах, которое прошло с полуночи 01 января 1970 года, UTC. В одном дне 86,400,000 миллисекунд. Диапазон объекта Date составляет от -100,000,000 дней до 100,000,000 дней относительно 01 января 1970 года, UTC.

* Значения, полученные с использованием упомянутого выше метода, зависят от настроек системы вашего устройства. Если вы измените настройки часов компьютера, изменится и время, которое будет возвращать этот метод.

Хорошо, мы разобрались с new Date JavaScript форматами и теперь готовы двигаться дальше!

Получение дня недели:

Чтобы получить день недели, используйте метод JavaScript объекта Date getDay() :

var day = date.getDay(); console.log(day);

* Обратите внимание, что дни недели пронумерованы от 0 до 6, воскресенье = 0, понедельник = 1, вторник = 2 и так далее.

Получение месяца:

Чтобы получить текущий месяц текущего года, используйте метод getMonth() . До этого я говорил, что названия методов интуитивно понятны!

var month = date.getMonth(); console.log(month); //1

* Обратите внимание, что, как и дни недели, месяцы возвращаются в числовом формате от 0 до 11; январь = 0, февраль = 1, март = 2 и так далее.

Получение дня месяца:

Чтобы получить день месяца, можно использовать метод GetDate() .

var dayOfMonth = date.getDate(); console.log(dayOfMonth); //2

* Метод GetDate() возвращает дни месяца, пронумерованные от 1 до 31; номер 1 соответствует первому дню месяца.

Получение времени:

Чтобы получить текущее время, используется метод GetTime () .

var time = date.getTime(); console.log(time); //1454461242058

Выглядит… странно… Что это такое? Вы видите количество миллисекунд, прошедших с 1 января 1970 00:00:00 UTC. Так сколько это лет?

1454461242058 мс / 31540000000 мс в году = около 46 лет
1970 год + 46 лет = 2016 год

Давайте проверим, чтобы убедиться:

var year = date.getFullYear(); console.log(year) //2016

Да, это оно! Мы только что вывели с помощью JavaScript new date текущую дату и время.

Примеры кода

Перевод статьи «Working with the Date Object in JavaScript » был подготовлен дружной командой проекта .

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

Сразу хочу предупредить, что некоторые написаны под западную 12-часовую систему.

Bootstrap Material DatetimepickerПусть вас не вводит в заблуждение присутствие Bootstrap в названии виджета - для его работы Bootstrap уже не требуется, необходимо только наличие jQuery. Основной особенностью является, если так можно выразится, многоэтапность при указании времени . Сначала выбираются часы, потом циферблат меняется и выбираются минуты. Аналогично происходит и при выборе даты.

Есть поддержка календаря в котором неделя начинается с понедельника , а это значит, что плагин можно использовать для проектов рунета.

jQuery UI TimepickerСозданный на базе существующего виджета jQuery. Этот плагин наследует его простоту, идеологию и соответствие используемой теме jQuery.

Работает с нашей, правильной, 24-часовой системой.

jquery.timepickerЕсли вы приверженец минимализма, то этот виджет для вас. Прототипом, вероятно, послужил Google Calendar - jquery.timepicker делает ввод времени таким же простым и естественным.

jQueryTimeAutocompletejQueryTimeAutocomplete похож на упомянутый выше jquery.timepicker но, кроме возможности выбора времени из списка , имеет функцию автодополнения . Она понравится тем пользователям, которые не любят просматривать списки в поисках нужного элемента, а предпочитают набирать значения с клавиатуры.

jQuery Time EntryВесьма оригинальный и удобный способ выбора значения в поле - кроме традиционного ввода с клавиатуры или нажатия на управляющие (справа от поля), изменять значения часов и минут можно при помощи колесика мыши.

TimeagoTimeago не является виджетом для ввода значений времени или даты, а позволяет выводить вместо конкретного значения даты или времени так называемые«неточные» значения (например «4 минуты назад» или «2 дня назад») . Как его применять и результат его работы можно посмотреть на домашней страничке плагина.

7 декабря 2014 в 12:30 Проблемы даты и времени в JS
  • JavaScript

Редкому программисту случается избежать работы с датой и временем. Вообще, дата/время - базовое понятие и в основной массе языков существуют встроенные механизмы работы с этим типом данных. Казалось бы, JS не исключение, есть встроенный тип Date, есть куча функций в прототипе, однако…

Кто виноват Первая проблема возникает когда нужно задать дату/время в тайм-зоне отличной от UTC и от локальной. Конструктор Date не имеет такого параметра.

New Date(); new Date(value); new Date(dateString); new Date(year, month[, day[, hour[, minute[, second[, millisecond]]]]]);
Единственный вариант, где можно указать смещение относительно UTC - третий способ. Вызов конструктора в этом формате позволяет передать смещение как часть строки:

New Date("Sun Feb 01 1998 00:00:00 GMT+0700")
Строка принимается в формате RFC2822, весьма неудобном и трудном к ручному вводу. Получить такую строку из пользовательского ввода практически невозможно. Я не могу себе представить человека, который бы согласился вводить дату в таком формате.

Не смотря на то, что в Date можно установить все параметры по отдельности для таймзоны UTC - проблемы это не решает – таймзона останется локальной. Но это не единственная проблема.

Смещение относительно UTC - не константа. Это функция от даты, времени (ну или от таймштампа, если угодно) и, опять же, тайм-зоны. Например, для Москвы последний перевод времени даёт:

New Date(2014, 9, 25, 0, 0, 0); // 26.10.2014, 21:00:00 GMT+3 new Date(2014, 9, 27, 0, 0, 0); // 25.10.2014, 22:00:00 GMT+4
Таким образом, конструктор в третьем варианте становится практически бесполезным поскольку смещение нужно знать заранее. А оно, как было сказано, так просто получено быть не может. Единственная библиотека, из попавшихся мне, которая использует базу данных Олсона для обсчета сдвигов - timezone-JS . Проблема использования этой библиотеки в том, что низлежащие библиотеки (date/time picker-ы) про неё ничего не знают и внутри активно используют стандартный Date. Остальные библиотеки, работающие с объектом Date, явно на эту базу не ссылаются и обновления из нее не получают. (Поправьте меня в комментариях.)

В бизнес применении тайм-зоны имеют смысл только если заданы дата и время. К примеру, если рабочий день начинается в 9:00, то вряд ли вы ожидаете что ваш коллега из Владивостока начнет работать в 15:00. Таймзоны учитываться не должны и в таком случае отображать дату нужно в UTC. Однако, в случае с регулярными событиями, происходящими в один момент времени в разных часовых поясах, таймзона все таки нужна. К примеру, ваш ежедневный скрам начинается в 10:00 для вас и в 13:00 для Новосибирска. Между прочим, в этом как раз и есть разница между GMT и UTC. UTC – это время без смещения, а GMT – это время со смещением 0. Поясню на примере:

31.12.2014, 20:59:59 GMT в Московском часовом поясе должно выглядеть как 31.12.2014, 23:59:59 31.12.2014, 20:59:59 UTC в Московском часовом поясе должно выглядеть как 31.12.2014, 20:59:59
Из-за этой арифметики их в основном и путают. К сожалению, напутано с этим параметром повсеместно. Отсутствие прямого указания таймзоны в JS трактуется как локальная таймзона, а указание UTC и GMT равнозначно.

В ситуации мог бы помочь Intl . Мог бы, но не обязан. В частности, там есть такой параметр timeZone, но, чуть далее стандартом определено: The time zone to use. The only value implementations must recognize is «UTC». В настоящее время кроме Chrome не один браузер произвольные таймзоны не поддерживает.
С диапазонами времени в JS все совсем плохо - ничего подобного в языке нет. Хочешь сделать хорошо – делай сам.

Что делать
  • Вариант 1.Не использовать произвольную таймзону. Вариант предпочтительный и, наверное, самый безболезненный. То есть, у вас есть только локальная таймзона и UTC. Для этих случаев во всех браузерах вроде как всё есть, пусть и не очень удобно. К тому же, таймзона выставляется глобально для ОС и менять ее для конкретного web-приложения некошерно.
  • Вариант 2.Если произвольные таймзоны необходимы - не использовать таймштамп. Совсем. Храните время в сберегательной кассе в RFC строке с указанием таймзоны. Не уверен что это поможет победить сдвиги таймзоны в кроссбраузерном понимании, но, как минимум, Chrome о таких сдвигах в курсе.
  • Вариант 3.Ситуации бывают разные и случается так, что в базу время записывается с какого ни будь устройства. То есть в виде таймштампа. Тут бежать некуда, что бы корректно отобразить время нужно знать либо таймзону устройства, либо таймзону пользователя, либо и того и другого и обсчитывать все сдвиги врукопашную. Без использования базы Олсона тут не обойтись.
  • Тут должна быть мораль сей басни, но добавить мне пока больше нечего. В черновиках стандарта ECMA я никаких подвижек не наблюдаю, наверное, их и не будет.

This chapter introduces the concepts, objects and functions used to work with and perform calculations using numbers and dates in JavaScript. This includes using numbers written in various bases including decimal, binary, and hexadecimal, as well as the use of the global Math object to perform a wide variety of mathematical operations on numbers.

Numbers

Unlike many other objects, you never create a Math object of your own. You always use the built-in Math object.

Date object

JavaScript does not have a date data type. However, you can use the Date object and its methods to work with dates and times in your applications. The Date object has a large number of methods for setting, getting, and manipulating dates. It does not have any properties.

JavaScript handles dates similarly to Java. The two languages have many of the same date methods, and both languages store dates as the number of milliseconds since January 1, 1970, 00:00:00, with a Unix Timestamp being the number of seconds since January 1, 1970, 00:00:00.

The Date object range is -100,000,000 days to 100,000,000 days relative to 01 January, 1970 UTC.

To create a Date object:

Var dateObjectName = new Date();

where dateObjectName is the name of the Date object being created; it can be a new object or a property of an existing object.

Calling Date without the new keyword returns a string representing the current date and time.

The parameters in the preceding syntax can be any of the following:

  • Nothing: creates today"s date and time. For example, today = new Date(); .
  • A string representing a date in the following form: "Month day, year hours:minutes:seconds." For example, var Xmas95 = new Date("December 25, 1995 13:30:00") . If you omit hours, minutes, or seconds, the value will be set to zero.
  • A set of integer values for year, month, and day. For example, var Xmas95 = new Date(1995, 11, 25) .
  • A set of integer values for year, month, day, hour, minute, and seconds. For example, var Xmas95 = new Date(1995, 11, 25, 9, 30, 0); .
Methods of the Date object

The Date object methods for handling dates and times fall into these broad categories:

  • "set" methods, for setting date and time values in Date objects.
  • "get" methods, for getting date and time values from Date objects.
  • "to" methods, for returning string values from Date objects.
  • parse and UTC methods, for parsing Date strings.

With the "get" and "set" methods you can get and set seconds, minutes, hours, day of the month, day of the week, months, and years separately. There is a getDay method that returns the day of the week, but no corresponding setDay method, because the day of the week is set automatically. These methods use integers to represent these values as follows:

  • Seconds and minutes: 0 to 59
  • Hours: 0 to 23
  • Day: 0 (Sunday) to 6 (Saturday)
  • Date: 1 to 31 (day of the month)
  • Months: 0 (January) to 11 (December)
  • Year: years since 1900

For example, suppose you define the following date:

Var Xmas95 = new Date("December 25, 1995");

Then Xmas95.getMonth() returns 11, and Xmas95.getFullYear() returns 1995.

The getTime and setTime methods are useful for comparing dates. The getTime method returns the number of milliseconds since January 1, 1970, 00:00:00 for a Date object.

For example, the following code displays the number of days left in the current year:

Var today = new Date(); var endYear = new Date(1995, 11, 31, 23, 59, 59, 999); // Set day and month endYear.setFullYear(today.getFullYear()); // Set year to this year var msPerDay = 24 * 60 * 60 * 1000; // Number of milliseconds per day var daysLeft = (endYear.getTime() - today.getTime()) / msPerDay; var daysLeft = Math.round(daysLeft); //returns days left in the year

This example creates a Date object named today that contains today"s date. It then creates a Date object named endYear and sets the year to the current year. Then, using the number of milliseconds per day, it computes the number of days between today and endYear , using getTime and rounding to a whole number of days.

The parse method is useful for assigning values from date strings to existing Date objects. For example, the following code uses parse and setTime to assign a date value to the IPOdate object:

Var IPOdate = new Date(); IPOdate.setTime(Date.parse("Aug 9, 1995"));

Example

In the following example, the function JSClock() returns the time in the format of a digital clock.

Function JSClock() { var time = new Date(); var hour = time.getHours(); var minute = time.getMinutes(); var second = time.getSeconds(); var temp = "" + ((hour > 12) ? hour - 12: hour); if (hour == 0) temp = "12"; temp += ((minute < 10) ? ":0" : ":") + minute; temp += ((second < 10) ? ":0" : ":") + second; temp += (hour >= 12) ? " P.M." : " A.M."; return temp; }

The JSClock function first creates a new Date object called time ; since no arguments are given, time is created with the current date and time. Then calls to the getHours , getMinutes , and getSeconds methods assign the value of the current hour, minute, and second to hour , minute , and second .

The next four statements build a string value based on the time. The first statement creates a variable temp , assigning it a value using a conditional expression; if hour is greater than 12, (hour - 12), otherwise simply hour, unless hour is 0, in which case it becomes 12.

The next statement appends a minute value to temp . If the value of minute is less than 10, the conditional expression adds a string with a preceding zero; otherwise it adds a string with a demarcating colon. Then a statement appends a seconds value to temp in the same way.

Finally, a conditional expression appends "P.M." to temp if hour is 12 or greater; otherwise, it appends "A.M." to temp .


Для работы с датой и временем в JavaScript существует специальный объект - Date. Этот объект поддерживается практически всем версиями JavaScript, а зачит им можно пользоваться не оглядываясь на проблемы совместимости.

Дата и время в объекте Date хранятся не в явном виде, а как и в большинстве языков программирования - в виде количества миллисекунд, прошедших с дня рождения Unix, т.е. с 0 часов 0 минут 1 января 1970 года. Отличительная особенность объекта Date - все диапазонные значения имеют индексы, начинающиеся с нуля. Это означает, что январь будет иметь индекс 0 (месяц №0), а декабрь будет не двенадцатым, а одиннадцатым месяцем. То же самое справедливо и для дней недели, часов, минут и пр.

Создать объект Date очень просто:

// текущая дата-время var date = new Date(); // дата-время из строки или числа var date = new Date(дата); // дата-время из отдельных значений var date = new Date(год, месяц, день, час, минута, секунда, миллисекунда);

Объект Date обладает рядом очень полезных методов, позволяющих работать с отдельными компонентами даты-времени, а так же проводить проверку коррестности и правильный вывод даты в заданном формате.

Методы получения компонентов даты-времени
getFullYear Возвращает год (например, 2011).
getYear Возвращает год. Назначение метода getYear аналогично назначению getFullYear, однако данный метод является устаревшим и не рекомендуются к использованию, т.к. результаты его работы не однозначны: для диапазона дат от 1900 до 1999 года метод возвращает номер года в столетии (двузначный, например 77), а для дат за пределами этого диапазона - возвращается полное значение (четырёхзначное, например 2009).
getMonth Возвращает месяц.
getDate Возвращает день месяца (число в месяце).
getHours Возвращает час.
getMinutes Возвращает минуту.
getSeconds Возвращает секунду.
getMilliseconds Возвращает миллисекунду.
getDay Возвращает номер деня недели.
getTime Возвращает миллисекундное смещение, хранимое объектом.
Методы изменения компонентов даты-времени
setFullYear Устанавливает год.
setYear Устанавливает год. Назначение метода setYear аналогично назначению setFullYear, однако данный метод является устаревшим и не рекомендуются к использованию (так же как и метод getYear).
setMonth Устанавливает месяц.
setDate Устанавливает дату в месяце (день месяца).
setHours Устанавливает час.
setMinutes Устанавливает минуту.
setSeconds Устанавливает секунду.
setMilliseconds Устанавливает миллисекунду.
setTime Устанавливает миллисекундное смещение относительно 00:00:00 01.01.1970
Фунции форматирования и вывода даты-времени
toString Возвращает строковое представление даты и времени.
toUTCString Возвращает строковое представление даты и времени с пересчётом на время UTC. Формат возвращаемой строки учитывает все интернет-стандарты.
toGMTString Возвращает строковое представление даты и времени с пересчётом на время GMT (время по Гринвичу). Формат возвращаемой строки учитывает все интернет-стандарты.
toLocaleString Аналог toString, но возвращает строковое представление даты и времени, отформатированное в соответствии с настройками локализации данного пользователя.
toTimeString Возвращает строковое представление времени (строка содержит только время).
toDateString Возвращает строковое представление даты (строка содержит только дату).
toLocaleTimeString Аналог toTimeString, но возвращает строковое представление времени, отформатированное в соответствии с настройками локализации пользователя.
toLocaleDateString Аналог toDateString, но возвращает строковое представление даты, отформатированное в соответствии с настройками локализации пользователя.
Дополнительные функции
getTimezoneOffset Возвращает смещение локального времени на компьютере пользователя относительно времени UTC. Смещение возвращается в минутах.
parse Функция позволяет проверить корректность даты-времени, записанных в виде строки. Если строка корректная - сразу будет создан объект Date.

Так же объект Date содержит ряд методов для работы с UTC-датами. Эти функции полностью аналогичны уже рассмотреным, но содержат в имени префикс "UTC" и работают только с "универсальным" временем: getUTCSeconds, setUTCFullYear и т.д.

Рассмотрим пример работы с датами:

var tmp = new Date(now.getTime()); var arrNames = new Array("Сегодня", "Завтра", "Через 1 год 6 месяцев 15 дней"); var arrNormal = new Array(); var arrLocal = new Array(); var arrUTC = new Array(); // сейчас arrLocal = tmp.toLocaleString(); arrNormal = tmp.toString(); arrUTC = tmp.toUTCString(); // завтра tmp.setDate(tmp.getDate() + 1); arrLocal = tmp.toLocaleString(); arrNormal = tmp.toString(); arrUTC = tmp.toUTCString(); // через 1 год 6 месяцев 15 дней tmp.setFullYear(tmp.getFullYear() + 1); tmp.setMonth(tmp.getMonth() + 6); tmp.setDate(tmp.getDate() + 15); arrLocal = tmp.toLocaleString(); arrNormal = tmp.toString(); arrUTC = tmp.toUTCString(); // выводим результаты в таблицу document.write("

" + "" + "" + "" + ""); for (i = 0; i < 3; i++) { document.write("" + " + " + " + " + ""); } document.write("
ДатаЛокализованнаяНе локализованнаяUTC
" + arrNames[i] + "" + arrLocal[i] + "" + arrNormal[i] + "" + arrUTC[i] + "
");

А вот результат работы этого скрипта:


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

1. По возможности пользоваться UTC или GMT-форматами. Особенно это важно при создани распределённых решений (например, клиентов платёжных систем). Использование общего опорного времени даст вам гарантии (пусть и не стопроцентные), что и вы и ваш удалённый партнёр будете одинаково интерпретировать получаемые данные.

2. Локализованные дату и время имеет смысл использовать только при выводе их пользователю. Во всех остальных случаях от локализованных данных лучше отказаться.

3. Если всё же приходится использовать локальные дату и время - не забывайте учитывать смещение локального времени относительно опорного (UTC или GMT).

Следование этим правилам избавит вас от большинства логических багов и недочётов, а значит сделает ваш код более стабильным и качественным.

error: