Автоматическое форматирование даты с использованием JavaScript: Добавление точек в поле ввода - Web-Global
Web-Global
info@web-global.ru

Автоматическое форматирование даты с использованием JavaScript: Добавление точек в поле ввода

15.04.2024 16
Поделиться:

При создании форм для ввода даты часто требуется предоставить пользователю удобный интерфейс. Один из способов сделать это — автоматически форматировать вводимые данные, чтобы они соответствовали определенному формату. В данной статье мы рассмотрим, как добавить точки в поле ввода даты (дд.мм.гг) с помощью JavaScript.

Что мы будем делать?

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

Шаги реализации:

  1. HTML: Создание поля вводаСначала создадим элемент <input> в нашем HTML-документе:
<input type="text" class="form-control" name="age" id="ageInput" placeholder="дд.мм.гг" maxlength="10">

Обратите внимание, что мы присвоили этому элементу id="ageInput", чтобы обратиться к нему с помощью JavaScript.

2. JavaScript: Обработка событий вводаДалее добавим JavaScript код, который будет обрабатывать ввод пользователя и автоматически форматировать дату:

<script>
// Находим поле ввода по id
const ageInput = document.getElementById('ageInput');

// Добавляем обработчик события ввода текста
ageInput.addEventListener('input', function(event) {
    // Получаем текущее значение поля ввода
    let value = event.target.value;

    // Удаляем все символы, кроме цифр
    value = value.replace(/\D/g, '');

    // Добавляем точки между группами цифр (дд.мм.гг)
    if (value.length > 4) {
        value = value.substring(0, 2) + '.' + value.substring(2, 4) + '.' + value.substring(4, 8);
    } else if (value.length > 2) {
        value = value.substring(0, 2) + '.' + value.substring(2, 4);
    }

    // Обновляем значение поля ввода
    event.target.value = value;
});
</script>
    1. В этом JavaScript коде мы:
      • Находим <input> с помощью getElementById('ageInput').
      • Добавляем слушатель события input, который срабатывает при вводе текста в поле.
      • Обрабатываем введенный текст, удаляя все символы, кроме цифр.
      • Форматируем числовое значение, добавляя точки между группами цифр (дд.мм.гг).
      • Обновляем значение поля ввода с отформатированной датой.

    Заключение

    Теперь у вас есть простой и эффективный способ автоматического форматирования вводимой даты в поле <input> с использованием JavaScript. Этот подход делает ввод данных более удобным для пользователей, позволяя им концентрироваться на вводе информации, а не на форматировании даты. Вы можете легко адаптировать этот пример под свои потребности, добавив дополнительные проверки или условия форматирования в соответствии с вашими требованиями.