Выбор даты и времени в JavaScript

Question

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

Моя страница HTML5, и я знаю о типах ввода datetime-local и time, но они не дают правильный формат.

Для datetime-local дата и время форматируются как:

yyyy-mm-ddThh:mm

Я пытаюсь найти способ просто сохранить данные в поле как mm-dd-yyyy hh:mm am/pm с помощью JavaScript.

Страница проста, поэтому пользователь просто заполняет вышеприведенное, а затем дата и время сохраняются в вызываемом элементе, используя document.getElememtById

То же самое только со временем, ища только время JavaScript, который использует 12-часовой формат, и значение сохраняется в элементе, называемом getElementById.

Я нашел такие вещи, как библиотеки, которые мне не нужны для этой простой страницы.

Answer 1

HTML5 представил множество новых типов, которые можно использовать для традиционного ввода.

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

<input type="date">

Автоматическая установка сегодняшней даты

Для автоматической установки [type="date"] вводя текущую дату с помощью vanilla JS, мы будем использовать объект JavaScript Date().

Сначала мы получим наше поле (предположим, что оно имеет идентификатор #today) и создайте новый Date() объект.

var field = document.querySelector('#today');
var date = new Date();

Поле [type="date"] выглядит визуально по-разному в зависимости от того, где вы живете и каким браузером вы пользуетесь (оно показывает даты в нормах локального формата), нозначение соответствует формату YYYY-MM-DD.

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

• Мы будем использовать getFullYear(), чтобы получить год вчетырехзначный формат.
• Мы будем использовать getMonth(), чтобы получить месяц.
• Мы будем использовать getDate(), чтобы получить день.

По какой-то нелепой причине метод getMonth () возвращает месяц в виде числа, начинающегося с 0 (январь равен 0, февраль равен 1 и т. Д.).Нам нужно добавить 1 к нашему результату, чтобы получить правильный месяц.

Поскольку они являются числами, а не строками, в getMonth() и getDate() отсутствуют ведущие нули для однозначных месяцев / дней.Мы можем использовать метод padStart(), чтобы добавить их в случае отсутствия.

Наш готовый результат выглядит следующим образом.

field.value = date.getFullYear().toString() + '-' + (date.getMonth() + 1).toString().padStart(2, 0) +
    '-' + date.getDate().toString().padStart(2, 0);

Давайте сделаем несколько вещей:

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

<label for="today">
    The Date
    <span class="description"> Please use the YYYY-MM-DD format</span>
</label>
<input
    id="today"
    type="date"
    pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))" placeholder="YYYY-MM-DD"

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

// Variables
var field = document.querySelector('#today');
var date = new Date();

// If [type="date"] is supported, update the DOM
if (isDateSupported()) {

    // Remove attributes
    field.removeAttribute('pattern');
    field.removeAttribute('placeholder');

    // Remove the helper text
    var helperText = document.querySelector('[for="today"] .description');
    if (helperText) {
        helperText.parentNode.removeChild(helperText);
    }

}

// Set the value
field.value = date.getFullYear().toString() + '-' + (date.getMonth() + 1).toString().padStart(2, 0) +
    '-' + date.getDate().toString().padStart(2, 0);

Вот рабочий пример Криса Фардинанда