JavaScript для оптимизаторов: добавление средства выбора даты и времени

Мы все были там: разочаровывающая задача ручного добавления даты в форму.

Не знаю, как у вас, а когда я ищу формат даты, мой мозг перегружается. Вы собираетесь использовать ММ/ДД/ГГГГ? Что, если вместо этого мы хотим ГГГГ-ММ-ДД? Сколько дней в феврале снова?

В этом сообщении блога вы познакомитесь с некоторыми функциями JavaScript, которые помогут оптимизировать ваш код, добавив поле ввода DateTime Picker в ваши формы.

Бизнес-кейс: добавление средства выбора даты и времени

В этом гипотетическом сценарии мы приходим к следующей гипотезе:

Чтобы проверить эту гипотезу, мы собираемся применить следующие изменения:

Код, использованный в эксперименте

Теперь давайте перейдем к веселой части!

Чтобы выполнить изменение, мы запускаем приведенный ниже код JavaScript на странице тестирования. Скопируйте код и попробуйте сами!

 var dateInput = document.querySelector("#date");
поддерживаемая переменная = истина;
вар тест = документ.создатьЭлемент("ввод");
пытаться {
  test.type = "дата";
} поймать (е) {
  поддерживается = ложь;
}
если (поддерживается) {
  dateInput.setAttribute("тип", "дата");
  dateInput.setAttribute("значение", getFormattedDate(0));
  dateInput.setAttribute("мин", getFormattedDate(-1));
  dateInput.setAttribute("max", getFormattedDate(1));
}
функция getFormattedDate(changeYear) {
  var сегодня = новая дата();
  var dd = String(today.getDate()).padStart(2, "0");
  var mm = String(today.getMonth() + 1).padStart(2, "0");
  var yyyy = today.getFullYear() + changeYear;
  formattedDate = гггг + "-" + мм + "-" + дд;
  вернуть отформатированную дату;
}

Разбивка кода

1. Новый синтаксис

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

try {} catch (ошибка) {} — это оператор, который вы можете использовать, чтобы попробовать определенный код и отловить ошибки, если это необходимо. Когда код запускается и ошибок не возникает, он пропускает перехват.

Если он вернет ошибку, он поймает ее. Теперь скрипт будет выполнять код между телом catch. Поскольку он передает ошибку в функцию, вы можете использовать console.log, чтобы найти конкретную проблему.

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

.type — это метод, который устанавливает значение атрибута «тип» элемента в DOM.

.getDate() — это метод, который возвращает день объекта даты. Он вернет день как число.

.padStart(targetLength, padString) — это метод, который позволяет нам дополнить строку другим символом на желаемую величину. Вы передаете количество раз, которое вы хотите дополнить строкой в ​​аргументе targetLength. Вы передаете строку, которая используется в качестве заполнения в аргументе padString. При заполнении будет учитываться длина padString.

.getMonth() — это метод, который возвращает месяц объекта даты в виде числа. Он начинает отсчет с 0, так что это будет январь. Число 11 будет декабрь.

String() — это метод, который пытается преобразовать переданный аргумент в строковое значение. Этот метод обычно используется, когда вы хотите преобразовать числа в строки.

.getFullYear() — это метод, который возвращает год объекта даты.

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

2. Логика

 var dateInput = document.querySelector("#date");

Начнем с выбора полей ввода даты с помощью метода querySelector. Мы добавили id="date" в поле ввода, чтобы использовать #date в качестве селектора. Мы присваиваем элемент нашей недавно объявленной переменной dateInput.

 поддерживаемая переменная = истина;

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

 вар тест = документ.создатьЭлемент("ввод");

Нам нужно создать поле ввода, которое мы будем использовать исключительно для проверки того, поддерживается ли этот тип. Мы делаем это с помощью метода .createElement.

Мы передаем «ввод» в виде строки для создания элемента ввода. Мы сохраняем этот элемент во вновь объявленной тестовой переменной.

Мы будем использовать следующий оператор try, чтобы проверить, поддерживается ли наше изменение:

 пытаться {

Начните с написания ключевого слова try. Мы открываем оператор фигурной скобкой.

Функция будет пробовать все, что находится между этими скобками. Он просто запустит код, чтобы увидеть, возникает ли ошибка.

 test.type = "дата";

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

 } поймать (е) {

Затем мы пишем наш оператор catch после закрывающей скобки. Часть между фигурными скобками запустится, когда мы поймаем ошибку.

Поместив «e» в качестве аргумента, мы можем использовать его в нашем операторе catch. Вы можете использовать это, например, для console.log конкретной ошибки.

 поддерживается = ложь;

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

 }

Затем закройте оператор catch закрывающей скобкой.

 если (поддерживается) {

Мы будем использовать значение поддерживаемой переменной для запуска оператора if. Если переменная имеет значение true, она запустит оператор. Таким образом, мы удостоверимся, что браузер не не поддерживается.

 dateInput.setAttribute("тип", "дата");

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

 dateInput.setAttribute("значение", getFormattedDate(0));

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

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

 dateInput.setAttribute("мин", getFormattedDate(-1));

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

 dateInput.setAttribute("max", getFormattedDate(1));

Сделайте то же самое для максимальной суммы, которую могут выбрать пользователи. Установите максимальный год через год, передав «1» в качестве аргумента.

 }

Закройте оператор if фигурной скобкой. Это изменение теперь будет отображаться в поле ввода.

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

 функция getFormattedDate(changeYear) {

Чтобы достичь этого результата, начните с использования ключевого слова function для его определения. Мы даем нашей функции имя getFormattedDate.

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

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

 var сегодня = новая дата();

Запустите тело этой функции, создав новый объект даты. Момент создания нового объекта даты будет сохраненным временем. Это означает, что мы можем присвоить наш новый объект вновь объявленной сегодня переменной.

 var dd = String(today.getDate()).padStart(2, "0");

Метод getDate получает дни нашей даты. Когда дни указаны однозначными цифрами, перед числом будет добавлен 0 с помощью метода padStart.

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

 var mm = String(today.getMonth() + 1).padStart(2, "0");

Здесь мы используем getMonth, чтобы получить месяцы сегодняшней даты. Мы делаем небольшую поправку, добавляя 1 к возвращаемому числу. Затем мы дополняли число нулем, если число состоит из одной цифры. Этот метод гарантирует, что у нас есть правильный формат для данных месяца.

 var yyyy = today.getFullYear() + changeYear;

Затем мы получаем текущий год с помощью метода getFullyear. Используйте число, переданное функцией, чтобы изменить год.

 formattedDate = гггг + "-" + мм + "-" + дд;

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

 вернуть отформатированную дату;

Мы возвращаем переменную formattedDate, чтобы она могла использоваться вызывающей функцией.

 }

Наконец, мы закрываем нашу функцию фигурной скобкой и заканчиваем наш скрипт. Сценарий может использовать эту функцию до того, как она будет объявлена, потому что функции поднимаются в начало кода. То же самое происходит с переменными. Код может работать немного быстрее, если вы переместите функцию formattedDate над оператором if.

3. Упражнение

Итак, теперь, когда вы изложили весь процесс, вам осталось только попробовать его. И не забывайте получать от этого удовольствие!

Идите вперед и измените поле ввода, чтобы поле min содержало дату, которая ровно через два года от сегодняшнего дня. Затем добавьте максимальную дату через два года. Удачи!

Не можете понять? Отправьте мне сообщение в LinkedIn, и я помогу вам!

А если вы пропустили нашу предыдущую статью, узнайте, как вставить раздел общей скидки на свой сайт и другие передовые методы оптимизации конверсии.