Формат данных и подсчет возраста в JavaScript - Блог ITVDN
ITVDN: курсы программирования
Видеокурсы по
программированию

Заказать звонок

Выбери свою IT специальность

Подписка

Заказать звонок

+38 099 757 27 82

Формат данных и подсчет возраста в JavaScript

advertisement advertisement

Введение

Как веб-разработчик, Вы можете знать, что форматирование данных на серверном языке – не очень сложная задача. Достаточно базового понимания языка и того, что Вам нужно для реализации, и вот – у Вас есть хорошо отформатированный объект даты и времени. Например, следующий код С# является хорошо отформатированным и может предоставить нужный Вам объект даты и времени.


var dateOfBirth = new DateTime(1995, 08, 29); // My date of birth 

var formatted = dateOfBirth.ToString("MMMM dd, yyyy");

// Would hold: August 29, 1995  

В выше написанном коде мы предусмотрели формат данных, который нам нужен, и код, что обеспечит ожидаемый результат. Впрочем, делать это в JavaScript весьма трудно, потому как в JavaScript нет переопределенного метода ToString, который может преобразовать объект даты и времени в должным образом форматированное значение.

Тем не менее, объекты Date в JavaScript используют методы, с помощью которых можно извлечь значения месяца, дня или года. Мы будем их использовать, чтобы сгенерировать форматированный string для объекта date. Также заметим, что в JavaScript объект даты и времени является числом, которое отображается как количество миллисекунд от 1-го января 1970 г. Поэтому, чтобы не писать свой собственный код для подсчета месяцев и дат, можете использовать встроенные функции getMonth, getDate и др. чтобы получить нужные значения. В нашей статье мы покажем Вам, как написать код и как правильно форматировать запись string в объект даты и времени.

Объект даты и времени в Javascript

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

var date = Date.now(); // current date time 

// OR 

var date = new Date(); // new instance; default 

// OR 

var date = new Date('string-notation-of-datetime');

// Any date time upto 1 January 1970 from Now.  

Теперь давайте поработаем с данным исходным кодом и посмотрим, что JavaScript может нам предложить.

Написание веб-приложения

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

Примечание: мы использовали Bootstrap в качестве стиля.

<input type="date" class="form-control"/>

Контроль после рендеринга

Контроль после редеринга

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

var dateValue = new Date($('input').val()); // Get the value   

// Now comes the stringification... Following code does that. 

var date = getMonth(dateValue.getMonth()) + " " + dateValue.getDate() + ", " + dateValue.getFullYear();

В JavaScript методы getDate, getMonth возвращают номер объекта. Вместо использования номера в качестве даты создадим другую функцию, которая возвращает месяц из нашего целого значения.

Примечание: date.getMonth() при возврате значения начинает отсчет от 0.

function getMonth(index) { // Pass the index as parameter 

    switch (index) { // Switch on index 

        case 0:

            return "January";

            break;

        case 1:

            return "February";

            break;

        case 2:

            return "March";

            break;

        case 3:

            return "April";

            break;

        case 4:

            return "May";

            break;

        case 5:

            return "June";

            break;

        case 6:

            return "July";

            break;

        case 7:

            return "August";

            break;

        case 8:

            return "September";

            break;

        case 9:

            return "October";

            break;

        case 10:

            return "November";

            break;

        case 11:

            return "December";

            break;

        default: // Wouldn't get called usually because range is 0-11 

            "Invalid number: " + index;

            break;

    }

}

Описанная выше функция возвращает строку для месяца. Поэтому, вышеуказанный код сможет вернуть данные в строковом представлении.Что касается функции расчета возраста, то реализовать ее не так просто, как в С# или других языках. Вам надо вручную отбросить значения объекта даты и времени в миллисекундах с 1970 года, учитывая вычисление результата от даты рождения до текущего времени. Запутались? Давайте проверим наш код и упростим формулировку.

var age = Math.abs(

             new Date(

                   Date.now() - dateValue // 1. Get the difference as new Date object 

              ).getUTCFullYear() - 1970 // 2. Calculate the years 

         ); // 3. Get the value  

Мы разделили процесс на три этапа:

  1. Прежде всего получим значение после отрицания даты рождения от текущей даты. Это будет основой для нашего алгоритма возраста.
  2. Дальше найдем UTC-значение года от значения, что мы получили через отрицание, и вычтем от него 1970.
  3. Теперь получим абсолютное значение от шага 2.

Теперь функция будет вмещать значение возраста для введенных пользователем данных. Запустим вышеуказанную функцию и получим HTML, для примера

Пример html

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

Заключение

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

Источник: http://www.c-sharpcorner.com/UploadFile/201fc1/calculating-and-formatting-date-in-javascript/

КОММЕНТАРИИ И ОБСУЖДЕНИЯ
advertisement advertisement

Покупай подпискус доступом ко всем курсам и сервисам

Библиотека современных IT знаний в удобном формате

Выбирай свой вариант подписки в зависимости от задач, стоящих перед тобой. Но если нужно пройти полное обучение с нуля до уровня специалиста, то лучше выбирать Базовый или Премиум. А для того чтобы изучить 2-3 новые технологии, или повторить знания, готовясь к собеседованию, подойдет Пакет Стартовый.

Стартовый
  • Все видеокурсы на 3 месяца
  • Тестирование по 10 курсам
  • Проверка 5 домашних заданий
  • Консультация с тренером 30 мин
59.99 $
Оформить подписку
Базовый
  • Все видеокурсы на 6 месяцев
  • Тестирование по 16 курсам
  • Проверка 10 домашних заданий
  • Консультация с тренером 60 мин
89.99 $
Оформить подписку
Премиум
  • Все видеокурсы на 1 год
  • Тестирование по 24 курсам
  • Проверка 20 домашних заданий
  • Консультация с тренером 120 мин
169.99 $
Оформить подписку
Notification success
Мы используем cookie-файлы, чтобы сделать взаимодействие с нашими веб-сайтами и услугами простым и значимым.