Пример программы на javascript реализующая вывод на экран текущий день

Содержание

Для работы с датой и временем в JavaScript существует встроенный объект Date , который содержит методы для создания, хранения, изменения или вывода элементов времени с точностью до миллисекунды. К таким элементам относят: год, месяц, день месяца, неделя, час, минута, секунда, миллисекунда, день недели.

Создать объект Date можно с помощью аргументов:

количество миллисекунд — new Date(value) ;
строка — new Date(dateString) ;
год, месяц, день, часы, минуты, секунды, миллисекунды;

Или пропустить аргументы вовсе.

new Date()

Создадим экземпляр объекта Date без дополнительных аргументов и выведем получившийся результат в console.

let date = new Date(); console.log(date); // Thu Sep 01 2022 06:46:30 GMT+1200 (Фиджи) console.log(date.getFullYear()); // 2022

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

Уроки Javascript / Как подключить и вывести результат выполнения на экран

Точно такую же информацию мы можем получить написав Date() без new .

let date = Date(); console.log(date); console.log(date.getFullYear()); // получим ошибку

Однако в этом случае мы получим строку, объект же Date может быть создан только путем вызова функции-конструктора, а следовательно с использованием оператора new . Встроенные методы, для работы с датой в JavaScript, со строкой работать не будут, кроме Date.parse() .

new Date(value)

Создать объект Date , можно передав в качестве аргумента количество миллисекунд.

console.log(new Date(0)); // Thu Jan 01 1970 12:00:00 GMT+1200 (Фиджи) console.log(new Date(818079300000)); // Tue Dec 05 1995 00:15:00 GMT+1200 (Фиджи) console.log(new Date(-268065720000)); // Tue Jul 04 1961 21:18:00 GMT+1200 (Фиджи)

Результат = 1 января 1970 года UTC+0 + количество миллисекунд.

Если указать миллисекунды со знаком минус, отсчет пойдет в обратную сторону. Таким образом все, что со знаком минус будет соответствовать дате до 1 января 1970 года.

getTime()

Количество миллисекунд прошедших с 1 января 1970 года по сегодняшний или заданный момент времени называется timestamp и может быть получено из new Date() с помощью метода getTime() .

date = new Date(2019, 5); alert(date.getTime()); // количество миллисекунд прошедшие с 1 января 1970 года alert(new Date(date.getTime())) // получаем дату обратно

Date.now()

Если необходимо получить количество миллисекунд прошедших с 1 января 1970 года по данный момент правильней будет использовать метод Date.now() .

let date = Date.now(); alert(date);

Запись эквивалента new Date().getTime() , но в отличие от этой конструкции Date.now() не создает промежуточный объект Date , что может быть особенно важно при разработке, где упор идет на быстродействие.

new Date(dateString)

Создать объект Date можно передав в качестве аргумента строку с датой и временем.

date = new Date(‘2021-09-25T05:27:00’); alert(date); // Sun Sep 25 2022 05:27:00 GMT+1300 (Тонга)

Дата должна быть записана в формате понятном методу Date.parse() , который преобразовывает строку в количество миллисекунд прошедших с 1 января 1970 года UTC+0. Если формат записи будет не верным, метод вернет NaN .

date = new Date(‘2021-09-25T05:27:00’); alert(Date.parse(date));

new Date(year, month, date, hours, minutes, seconds, millisecond)

new Date(1995, 11, 4, 3, 15, 10, 0); // Mon Dec 04 1995 03:15:10 GMT-0600 (Центральная Америка)

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

Обязательные аргументы

Год (year) — обязательный аргумент. Обычно записывается полностью — все четыре числа — 2022. Допустима, но не рекомендуется запись от 0 до 99. В этом случае год будет интерпретирован, как 1900 + заданное число.

Месяц (month) — обязательный аргумент и целое число от 0 до 11, где первое это январь, а последнее декабрь.

Необязательные аргументы

День (date) — необязательный аргумент обозначающий день месяца, если не задан, то по умолчанию принимает значение 1. Отсчет начинается с единицы.

Часы (hours) — от 1 до 24

Минуты (minutes) — от 1 до 60

Секунды (seconds) — от 1 до 60

Миллисекунды (millisecond) — от до 1000

Часы, минуты, секунды и миллисекунды — это целые числа, если аргумент не задан, то по умолчанию принимается значение 0.

Если при создании объекта Date в качестве аргумента задано число больше или меньше логического диапазона, программа автоматически переформатирует его в корректное, перенеся значение не соседнее. Если год 2010, а месяц 12 – это будет январь 2011. Если задать 10 часов 61 минуту – это будет 11 часов 1 минута. Если месяц апрель, а день 0 это 31 марта.

Методы для получения элементов даты

getFullYear()

let date = new Date(‘1996-12-17T05:30:00’); date.getFullYear(); // 1996

Метод позволяет получить год из объекта Date , если аргументов нет вернет текущий.

getMonth()

let date = new Date(‘1996-12-17T05:30:00’); date.getMonth(); // 11

Метод вернет месяц в формате от 0 до 11, если аргументов нет текущий.

getDate()

let date = new Date(‘1996-12-17T05:30:00’); date.getDate(); // 17

Метод возвращает день месяца указанного в объекте, если аргументов нет вернет текущую дату по местному времени.

getHours(), getMinutes(), getSeconds(), getMilliseconds()

let date = new Date(1996, 11, 17, 21, 30, 10, 900); date.getHours(); // 21 или 9 часов вечера date.getMinutes(); // 30 минут date.getSeconds(); // 10 секунд date.getMilliseconds(); 900 миллисекунд

Если аргумент отсутствует метод вернёт 0.

getTimezoneOffset()

Метод возвращает разницу в минутах между локальным временем и UTC.

let date = new Date().getTimezoneOffset(); alert(date); // при UTC +3 покажет -180

getDay()

let date = new Date(1996, 11, 17); date.getDay(); // 2

Метод возвращает день недели, отсчет начинается с 0 (воскресенье) и заканчивается 6-ю (суббота). В примере 1996 год 17 декабря и это вторник, следовательно результат 2.

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

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

setFullYear(год, [месяц], [день месяца])

setMonth(месяц, [день месяца])

setHours(часы, [минуты], [секунды], [миллисекунды])

setMinutes(минуты, [секунды], [миллисекунды])

setTime() — устанавливает время в Date равным количеству миллисекунд прошедших с 1 января 1970 г. UTC.

При использовании методов результат возвращается в миллисекундах прошедших с 1 января 1970 г. по времени установленном на компьютере.

let date = new Date(2019, 0); // Tue Jan 01 2019 00:00:00 GMT+0300 (Москва) date.setFullYear(2021); // 1609448400000 мс, что равно Fri Jan 01 2021 00:00:00 GMT+0300 (Москва)

В примере мы передали в объект 2021 год, который и заменил 2019-ый.

UTC-варианты методов

Методы получения и передачи элементов для объекта Date работают согласно времени установленном на компьютере. Для того, чтобы в качестве результата получать дату относительно всемирного координированного времени (UTC) используют похожие методы, отличающиеся только вставкой UTC.

Получение элементов даты согласно UTC:

getUTCFullYear() , getUTCMonth() , getUTCDate() , getUTCHours() , getUTCMinutes() , getUTCSeconds() , getUTCMilliseconds() , getUTCDay()

Установка компонентов даты и времени согласно UTC:

setUTCFullYear() , setUTCMonth() , setUTCDate() , setUTCHours() , setUTCMinutes() , setUTCSeconds() , setUTCMilliseconds()

Преобразование объекта Date к строке

Для того, чтобы получить из Date нужные элементы даты и времени в формате строки используют следующие методы:

toString() — дата и время

toTimeString() — только время

toDateString() — только дата

toUTCString() — дата и время в формате UTC

toISOString() — дата и время в формате ISO

toLocaleTimeString() — только время в локальном формате

toLocaleString() — дата и время в локальном формате

let date = new Date(2018, 4, 19, 2, 34, 10); date.toString(); // Sat May 19 2018 02:34:10 GMT+0300 (Москва) date.toTimeString(); // 02:34:10 GMT+0300 (Москва) date.toDateString(); // Sat May 19 2018 date.toUTCString(); // Fri, 18 May 2018 23:34:10 GMT date.toISOString(); // 2018-05-18T23:34:10.000Z date.toLocaleTimeString(); // 02:34:10 date.toLocaleString(); // 19.05.2018, 02:34:10

Итого

1. Объект Date может быть создан без аргументов или с аргументами. В первом случае получим текущую временную метку, во втором задаем нужный отрезок времени с помощью миллисекунд, строки с датой или аргументов (год, месяц, день, часы, минуты, секунды, миллисекунды).

2. Для получения отдельных элементов Date используют методы — getFullYear() , getMonth() , getDate() , getHours() , getMinutes() , getSeconds() , getMilliseconds() , getDay() .

3. Для того, чтобы установить новые компоненты даты и времени используют: setFullYear() , setMonth() , setDate() , setHours() , setMinutes() , setSeconds() , setMilliseconds() , setTime() .

4. Для получения даты в нужном формате в виде строки используют: toString() , toTimeString() , toDateString() , toUTCString() , toISOString() , toLocaleTimeString() , toLocaleString() .

5. При создании Date в независимости какие аргументы и в каком формате передаются, создается объект со всеми элементами времени.

6. Если передать в Date аргументы времени некорректного формата (целые числа), дата будет корректироваться переносом значения на соседнее.

Skypro — научим с нуля

Источник: learnjs.ru

Как вывести на страницу текущую дату на JS

У JavaScript есть встроенные методы для вывода текущей даты в нужном формате. Желаемый формат задается в аргументах используемых методов. Например для вывода названия месяца в виде строки, в аргументах следует указать: month: ‘long’.

HTML разметка

Создадим контейнер с классом calendar для нашего мини-календаря. Далее пропишем теги p c уникальными ID, внутри которых будет выводиться текущая дата (число, день недели, месяц и год).

JavaScript код

У JavaScript уже имеется встроенный объект: дата и время. А также, необходимый набор методов, с помощью которых можно получить название месяца, дня недели и.т.д. Все нужные нам методы занесем в переменные с осмысленными названиями.

const lang = navigator.language; // определяет язык браузера
let date = new Date(); // создание нового объекта с текущей датой и временем
let dayNumber = date.getDate(); // получение даты
let month = date.getMonth(); // получение месяца
let dayName = date.toLocaleString(lang,); // получения названия дня недели
let monthName = date.toLocaleString(lang,< month: ‘long’ >); // получение названия месяца
let year = date.getFullYear(); // получение текущего года

Получаем все элементы по ID и выводим на странице переменные.

document.getElementById(‘monthName’).innerHTML= monthName;
document.getElementById(‘dayName’).innerHTML= dayName;
document.getElementById(‘dayNumber’).innerHTML= dayNumber;
document.getElementById(‘year’).innerHTML= year;

Как вывести на страницу текущую дату на JS.

Красивое оформление в CSS

Теперь нужно все красиво оформить в стиле дизайна вашего сайта. Выведем календарь внутри белого контейнера и в центре страницы.

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Источник: myrusakov.ru

Работа с датой и временем в JavaScript. Объект класса Date. Полная инструкция

Дата и время и объект Date в JavaScript

JavaScript

На чтение 8 мин Просмотров 7.9к. Опубликовано 26.01.2022

В этом уроке уроке рассмотрим работу с датой и временем в JavaScript. Как создавать текущую дату, вывод времени в JS: как получить год, месяц, дату, часы и минуты.

— Как отформатировать время в JS.
— Что такое UTC и GMT.
— Как форматировать время с помощью toLocaleDateString(),
— В чем передавать дату и время через Fetch,
— метод toISOString().

Приглашаю к просмотру видео урока или посмотреть его текстовую версию ниже.

Создание времени

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

Создать текущее время и дату:

// Текущее время let now = new Date();

Также при создании объекта Date можно передать набор аргументов — год, месяц (0 — Январь, 11 — Декабрь), число, часы, минуты, секунды, миллисекунды.

// Передать набор аргументов let d = new Date(2022, 8, 2, 11, 30, 0, 0) console.log(d); // Fri Sep 02 2022 11:30:00 GMT+0300 (Москва, стандартное время)

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

let d; // Передать дату и время в виде строки d = new Date(‘2020-09-02’); d = new Date(‘2020/09/02’); d = new Date(‘September 02, 2020’); d = new Date(‘September 02, 2020 15:10:05 +5’); d = new Date(‘September, 2020’); d = new Date(‘2020 September’); d = new Date(‘2020’);

Еще создать дату можно на основе временной метки timestamp:

let d = new Date(1643047926524)

И на основе ISO строки:

let d = new Date(«2022-01-01T07:15:00.000Z»)

Форматирование времени. Метод toLocaleString()

Самый простой и быстрый способ вывести отформатированную дату и время, отдельно дату или отдельно время — это использовать метод .toLocaleString()

// Текущее время let d = new Date(); console.log(d); // Wed Jan 26 2022 18:47:03 GMT+0300 (Москва, стандартное время) // Метод toLocaleString() console.log(d.toLocaleString(«ru-RU»)); // 26.01.2022, 18:47:03 console.log(d.toLocaleDateString(«ru-RU»)); // 26.01.2022 console.log(d.toLocaleTimeString(«ru-RU»)); // 18:47:03

Получение timeStamp временной метки в милисекундах

d.getTime()

Получение отдельных компонентов времени

С помощью специальных методов мы можем получать отдельные компоненты даты и времени. Можно получить год, месяц, часы, минуты, секунды, миллисекунды.

d.getTime() d.getFullYear() d.getDate() d.getDay() d.getMonth() d.getHours() d.getMinutes() d.getSeconds() d.getMilliseconds()

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

Получение отдельных компонентов времени может пригодится вам для написания собственных функций форматирования времени.

Напишем функцию чтобы получать время в формате 24.01.2022, 14:15

// Текущее время let d = new Date(); console.log(d); // Wed Jan 26 2022 18:41:50 GMT+0300 (Москва, стандартное время) // 24.01.2022, 14:15 function formatTime(d)< const date = d.getDate().toString().padStart(2, «0»); const month = (d.getMonth() + 1).toString().padStart(2, «0»); const year = d.getFullYear(); const h = d.getHours().toString().padStart(2, «0»); const m = d.getMinutes().toString().padStart(2, «0»); return `$.$.$, $:$` > console.log(formatTime(d)); // 26.01.2022, 18:41

На основе предыдущей функции, напишем ещё одну, которая будет выводить время в формате Напишем функцию чтобы получать время в формате Пн, 24 января 2022, 16:12

// Текущее время let d = new Date(); console.log(d); // Wed Jan 26 2022 18:41:50 GMT+0300 (Москва, стандартное время) // Пн, 24 января 2022, 16:12 function formatRusTime(d)< const day = d.getDay(); // 0 — 6 const dayTitle = [‘Вс’, ‘Пн’, ‘Вт’, ‘Ср’, ‘Чт’, ‘Пт’, ‘Сб’]; const date = d.getDate().toString().padStart(2, «0»); const month = d.getMonth(); // 0 — 11 const monthTitle = [ ‘января’, ‘февраля’, ‘марта’, ‘апреля’, ‘мая’, ‘июня’, ‘июля’, ‘августа’, ‘сентября’, ‘октября’, ‘ноября’, ‘декабря’]; const year = d.getFullYear(); const h = d.getHours().toString().padStart(2, «0»); const m = d.getMinutes().toString().padStart(2, «0»); return `$, $ $ $, $:$` > console.log(formatRusTime(d)); // Ср, 26 января 2022, 18:41

Изменение отдельных компонентов времени

С помощью специальных методов мы можем изменять отдельные компоненты даты и времени. Можно менять год, месяц, часы, минуты, секунды, миллисекунды.

Автоисправление. Добавление времени

При работе с датой и временем объект Date умеет делать автоисправление. Например если мы указали количество часов больше чем 24, то «лишние» часы не пропадут а перейдут на другой день и дата увеличится на 1 день.

let d = new Date(’01 January 10:00′); // Устанавливаем кол-во часов на 30, было 10. Лтшние 6 часов перейдут на следующий день d.setHours(30); // Получим 02 Января 06:00 console.log(d); // Tue Jan 02 2001 06:00:00 GMT+0300 (Москва, стандартное время)

Благодаря этому можно делать добавление времени, например указать сколько нужно добавить «часов» к текущему времени:

let d = new Date(); console.log(d); // Добавляем 10 часов, указывая что часы = текущие часы + 10 d.setHours(d.getHours() + 10); console.log(d);

Сравнение времени

Чтобы сравнить время в двух объектах типа Date, необходимо сравнивать не сами объекты, а их timestamp:

let d1 = new Date(‘September 20, 2020’); let d2 = new Date(‘September 20, 2020’); // false, потому что это два разные объекта console.log(d1 === d2); // true, так как сравниваем время в милисекундах console.log(d1.getTime() === d2.getTime());

Разность времени

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

let d1 = new Date(‘September 25, 2020’); let d2 = new Date(‘September 20, 2020’); console.log(d1.getTime() — d2.getTime()); // 432000000

Временная метка timestamp

Timestamp (временная метка) — это целое число равное количеству милисекунд (внимание, в UNIX timestamp исчисляется в секундах), прошедших с полуночи 1 января 1970 года по усреднённому времени Гринвича (т.е. нулевой часовой пояс, точка отсчёта часовых поясов) GMT 0 / UTC 0.

Получить timestamp можно вызвав метод .getTime() на любом объекте класса Date:

let newYear2020 = new Date(‘January 01, 2020’); console.log(newYear2020); // Wed Jan 01 2020 00:00:00 GMT+0300 (Москва, стандартное время) console.log(newYear2020.getTime()); // 1577826000000

Можно использовать timestamp при создании новой даты:

let date = new Date(1577826000000); console.log(date); // Wed Jan 01 2020 00:00:00 GMT+0300 (Москва, стандартное время) let now = new Date(); console.log(now); // Wed Jan 26 2022 18:28:22 GMT+0300 (Москва, стандартное время)

Также на существующем объекте с датой, можно полностью заменить его дату и время вызвав метод setTime() :

now.setTime(1577826000000); console.log(now); // Wed Jan 01 2020 00:00:00 GMT+0300 (Москва, стандартное время)

Международное время и часовые пояса. UTC и GMT форматы

Рекомендую замечательную статью чтобы узнать про форматы времени, GMT и UTC: https://raznisa.ru/raznica-mezhdu-gmt-i-utc/

Если очень вкратце, то вот несколько тезисов которые вам надо знать о форматах GMT и UTC:

GMT — основано на астрономических наблюдениях

UTC — метод измерения времени с использованием атомных часов

Разница во времени между UTC и GMT составляет доли секунды. Поэтому для общих целей оба времени считаются одинаковыми.

Грубо говоря, мы можем сказать что: UTC = GMT = UTC+0 = GMT+0

Поэтому если где-то вы встречаете формулировку «время по UTC» — то здесь имеется ввиду UTC+0, просто +0 не уточняется.

Хранение времени внутри объектов класса Date

Внутри объектов Date время всегда хранится в виде временной метки Timestamp. Timestamp всегда описывает время по часовому поясу UTC+0.

При выводе времени (например распечатка в консоль), происходит автоматическое форматирование времени в текущий часовой пояс.

Чтобы пояснить, сделаем следующий пример. Создадим время по временной метке 0, то есть ноль секунд прошедших с 1 января 1970 года. При попытке вывода этого времени находясь в часовом поясе GMT+3 (Москва) мы увидим 03:00 часа, потому как GMT+3 имеет разницу в 3 часа по сравнению с UTC+0.

let d = new Date(0); // 01.01.1970 00:00 UTC+0 / GMT console.log(d); // 01.01.1970 03:00 GMT+3

Еще пример, создадим время по timestamp равному 1 час с 1970 года:

d = new Date(1000 * 60 * 60); // 01.01.1970 01:00 UTC0/GMT0 console.log(d); // 01.01.1970 04:00 UTC+3/GMT+3

Получим 1 час в UTC+0, и 4 часа при выводе, так как локальное время в браузере GMT+3.

Также мы всегда можем узнать на сколько наша локальная временная зона отличается от зоны UTC+0, для этого есть метод d.getTimezoneOffset() . Он возвращает количество минут на сколько отличается зона UTC от вашей локальной зоны. Запустив его находясь в Москве GMT+3 получим -180 минут.

console.log(d.getTimezoneOffset()); // -180

Международный ISO формат. Метод toISOString()

Существует международный ISO формат времени, выглядит следующим образом: 2022-01-01T07:15:00.000Z Сначала идет дата, после разделитель T , далее время часы, минуты, секунды, и после точки . милисекунды, в конце буква Z . Буква Z означает что время указано в UTC (UTC+0).

Чтобы получить ISO формат времени, необходимо вызвать метод .toISOString();

let d = new Date(«01/01/2022 10:15»); // GMT+3 console.log(d.toISOString()); // 2022-01-01T07:15:00.000Z

На основе ISO строки можно создать объект Date:

d = new Date(«2022-01-01T07:15:00.000Z»)

При конвертации объекта типа Date в JSON строку он автоматически конвертируется в ISOString:

let json = JSON.stringify(d); // «2022-01-01T07:15:00.000Z»

Если сравним, то получим true:

JSON.stringify(d) === JSON.stringify(d.toISOString()) // true

Поэтому можно смело конвертировать объект Date в JSON и сохранять в localStorage или передавать через fetch в API.

localStorage.setItem(‘time’, JSON.stringify(d))

Источник: webcademy.ru