Форматирование даты в JavaScript / Программирование / Sql.ru

❮ ПредыдущаяСледующая Глава ❯


JavaScript Дата ввода

Есть правило, 4 типа JavaScript форматов даты:

Тип пример
ISO Дата "2015-03-25" (международный стандарт)
Короткие Дата "03/25/2015" или "2015/03/25"
Длинные Дата "Mar 25 2015" или "25 Mar 2015"
Полный Дата "Wednesday March 25 2015"

JavaScript Дата Выход

Независимо от формата входного сигнала, JavaScript будет (по умолчанию) вывода даты в формате полный текст строки:

Wed Mar 25 2015 01:00:00 GMT+0100 (W. Europe Standard Time)


JavaScript ISO Даты

ISO 8601 является международным стандартом для представления даты и времени.

ISO 8601 Синтаксис (YYYY-MM-DD) также является предпочтительным JavaScript формат даты:

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

Его можно записать без указания дня (YYYY-MM) :

Временные зоны будут меняться результат выше в период с 28 февраля по 01 марта.

Она может быть написана без месяца и дня (YYYY) :

Временные зоны будут меняться результат выше в период с 31 декабря 2014 года и 01 января 2015 года.

Оно может быть записано с добавлением часов, минут и секунд (YYYY-MM-DDTHH:MM:SS) :

Пример (Полная дата плюс часы, минуты и секунды)

var d = new Date(«2015-03-25T12:00:00»);

Попробуй сам "

Т в строке даты, между датой и временем, указывает время UTC.

UTC (Universal Time Coordinated) такая же, как GMT (время по Гринвичу).


JavaScript Длинные даты.

Длинные сроки чаще всего написаны с "MMM DD YYYY" синтаксис , как это:

Месяц и день может быть в любом порядке:

И месяц можно записать в полном (январь), или сокращенно (Jan):

Запятые игнорируются. Имена не чувствительны к регистру:


JavaScript Короткие даты.

Короткие сроки чаще всего написаны с "MM/DD/YYYY" синтаксис , как это:

JavaScript также будет принимать "YYYY/MM/DD" :

Месяц написан до того дня во всех короткие даты и формат даты ISO.


Полный формат даты

JavaScript принимает строки с датой в "полном формате JavaScript":

пример

var d = new Date(«Wed Mar 25 2015 09:56:24 GMT+0100 (W. Europe Standard Time)»);

Попробуй сам "

JavaScript будет игнорировать ошибки и во имя дня и во время круглых скобках:


Часовые пояса

JavaScript принимает эти часовые пояса:

Часовой пояс Описание
UTC Всемирное координированное время
GMT Время по Гринвичу
EDT (США) по восточному поясному времени
CDT (США) Центральное летнее время
MDT (США) Mountain Переход на летнее время
PDT (США) Тихоокеанское летнее время
EST (США) по восточному поясному времени
CST (США) Центральное время
MST (США) Mountain Standard Time
PST (США) Тихоокеанское стандартное время

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

При получении дату, без указания часового пояса, то результат преобразуется в часовой пояс браузера.

Другими словами: Если дата / время создается в GMT (время по Гринвичу), дата / время будут преобразованы в CDT (Центральный США поясному времени), если пользователь переходит из центральной части США.

❮ ПредыдущаяСледующая Глава ❯

Встроенные объекты

Последнее обновление: 1.11.2015

Кроме возможности создавать свои объекты JavaScript также предоставляет набор встроенных типов объектов, которые мы можем применять в различных ситуациях.

Объект Date. Работа с датами

Объект Date позволяет работать с датами и временем в JavaScript.

Существуют различные способы создания объекта Date.

JavaScript Форматы даты

Первый способ заключается в использовании пустого конструктора без параметров:

var currentDate = new Date(); document.write(currentDate);

В этом случае объект будет указывать на текущую дату компьютера:

Второй способ заключается в передаче в конструктор Date количества миллисекунд, которые прошли с начала эпохи Unix, то есть с 1 января 1970 года 00:00:00 GMT:

var myDate = new Date(1359270000000); document.write(myDate); // Sun Jan 27 2013 10:00:00 GMT+0300 (RTZ 2 (зима))

Третий способ состоит в передаче в конструктор Date дня, месяца и года:

var myDate = new Date(«27 March 2008»); // или так // var myDate = new Date(«3/27/2008»); document.write(myDate); // Thu Mar 27 2008 00:00:00 GMT+0300 (RTZ 2 (зима))

Если мы используем полное название месяца, то оно пишется в по-английски, если используем сокращенный вариант, тогда используется формат месяц/день/год.

Четвертый способ состоит в передаче в конструктор Date всех параметров даты и времени:

var myDate = new Date(2012,11,25,18,30,20,10); // Tue Dec 25 2012 18:30:20 GMT+0300 (RTZ 2 (зима))

В данном случае используются по порядку следующие параметры: . При этом надо учитывать, что отсчет месяцев начинается с нуля, то есть январь — 0, а декабрь — 11.

Получение даты и времени

Для получения различных компонентов даты применяется ряд методов:

  • getDate(): возвращает день месяца

  • getDay(): возвращает день недели (отсчет начинается с 0 — воскресенье, и последний день — 6 — суббота)

  • getMonth(): возвращает номер месяца (отсчет начинается с нуля, то есть месяц с номер 0 — январь)

  • getFullYear(): возвращает год

  • toDateString(): возвращает полную дату в виде строки

  • getHours(): возвращает час (от 0 до 23)

  • getMinutes(): возвращает минуты (от 0 до 59)

  • getSeconds(): возвращает секунды (от 0 до 59)

  • getMilliseconds(): возвращает миллисекунды (от 0 до 999)

  • toTimeString(): возвращает полное время в виде строки

Получим текущую дату:

var days = [«Воскресенье», «Понедельник», «Вторник», «Среда», «Четверг», «Пятница», «Суббота»]; var months = [«Январь», «Февраль», «Март», «Апрель», «Май», «Июнь», «Июль», «Август», «Сентябрь», «Октябрь», «Ноябрь», «Декабрь»]; var myDate = new Date(); var fullDate = «Сегодня: » + myDate.getDate() + » » + months[myDate.getMonth()] + » » + myDate.getFullYear() + «, » + days[myDate.getDay()]; document.write(fullDate); // Сегодня: 18 Август 2015, Вторник

Перевести из числовых значений в более привычные названия для дней недели и месяцев используются массивы. Получив индекс дня недели () и индекс месяца () можно получить нужный элемент из массива.

Теперь получим текущее время:

var welcome; var myDate = new Date(); var hour = myDate.getHours(); var minute = myDate.getMinutes(); var second = myDate.getSeconds(); if (minute < 10) { minute = «0» + minute; } if (second < 10) { second = «0» + second; } if (hour < 12) { welcome = «Доброе утро»; } else if (hour < 17) { welcome = «Добрый день»; } else { welcome = «Добрый вечер»; } document.write(welcome + «, текущее время: » + hour + «:» + minute + «:» + second); // Добрый вечер, текущее время: 22:50:39

Установка даты и времени

Коме задания параметров даты в конструкторе для установки мы также можем использовать дополнительные методы объекта Date:

  • setDate(): установка дня в дате

  • setMonth(): уставовка месяца (отсчет начинается с нуля, то есть месяц с номер 0 — январь)

  • setFullYear(): устанавливает год

  • setHours(): установка часа

  • setMinutes(): установка минут

  • setSeconds(): установка секунд

  • setMilliseconds(): установка миллисекунд

Установим дату:

var days = [«Воскресенье», «Понедельник», «Вторник», «Среда», «Четвег», «Пятница», «Суббота»]; var months = [«Январь», «Февраль», «Март», «Апрель», «Май», «Июнь», «Июль», «Август», «Сентябрь», «Октябрь», «Ноябрь», «Декабрь»]; var myDate = new Date(); myDate.setDate(15); myDate.setMonth(6); myDate.setYear(2013); var fullDate = myDate.getDate() + » » + months[myDate.getMonth()] + » » + myDate.getFullYear() + «, » + days[myDate.getDay()]; document.write(fullDate); // 15 Июль 2013, Понедельник

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

Например, установить для часа число 54:

myDate.setHour(54);

В этом случае значение часа будет равно 54 — 24 * 2 = 6, а оставшиеся часы будут составлять два дня (24 * 2), что прибавит к дате два дня. То же самое действует и в отношении дней, минут, секунд, миллисекунд и месяцев.

НазадСодержаниеВперед

Частой задачей для сайта является отображения времени и даты.

Дата и Время

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

Указанный ниже скрипт Java Script выводит дату и день недели средствами JavaScript:

<script type="text/javascript">

var months=new Array(13);
months[1]="января";
months[2]="февраля";
months[3]="марта";
months[4]="апреля";
months[5]="мая";
months[6]="июня";
months[7]="июля";
months[8]="августа";
months[9]="сентября";
months[10]="октября";
months[11]="ноября";
months[12]="декабря";

var time=new Date();
var thismonth=months[time.getMonth() + 1];
var date=time.getDate();
var thisyear=time.getFullYear();
var day=time.getDay() + 1;

if (thisyear < 2000)
thisyear = thisyear + 1900;
if(day==1) DayofWeek = "Воскресенье.";
if(day==2) DayofWeek = "Понедельник.";
if(day==3) DayofWeek = "Вторник.";
if(day==4) DayofWeek = "Среда.";
if(day==5) DayofWeek = "Четверг.";
if(day==6) DayofWeek = "Пятница.";
if(day==7) DayofWeek = "Суббота.";

document.write( "<center>"+ date + " ");
document.write(thismonth + " " + thisyear + " "+ "года" + ","+" " + DayofWeek + "<\/center>");

</script> 

ДемонстрацияСкачать исходники

В качестве примера вставки тегов в код вывод Даты центрирован тегом center.

 

Предыдущая статья
Кнопка распечатать страницу JavaScript print()Следующая статья
Как запретить скачивание изображений с сайта?

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

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

Объект Date

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Функция

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

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

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

Функция

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

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

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

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

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

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

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

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

Строки даты и времени (JavaScript)

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

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

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

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

Метод — это сокращение от выражения .

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

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

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

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

Заключение

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

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

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *