Форма, где при нажатии на кнопку во второе поле вводится дата из первого поля плюс 6 месяцев

Вот пример реализации формы, где при нажатии на кнопку во второе поле вводится дата из первого поля плюс 6 месяцев:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Добавление 6 месяцев к дате</title>
</head>
<body>
    <form>
        <label for="firstDate">Первая дата:</label>
        <input type="date" id="firstDate" name="firstDate">
        
        <br><br>
        
        <label for="secondDate">Дата +6 месяцев:</label>
        <input type="date" id="secondDate" name="secondDate" readonly>
        
        <br><br>
        
        <button type="button" onclick="addSixMonths()">Добавить 6 месяцев</button>
    </form>

    <script>
        function addSixMonths() {
            // Получаем значение из первого поля
            const firstDateInput = document.getElementById('firstDate');
            const firstDateValue = firstDateInput.value;
            
            // Если дата не введена, ничего не делаем
            if (!firstDateValue) {
                alert('Пожалуйста, введите первую дату');
                return;
            }
            
            // Создаем объект Date из введенного значения
            const firstDate = new Date(firstDateValue);
            
            // Добавляем 6 месяцев
            const secondDate = new Date(firstDate);
            secondDate.setMonth(secondDate.getMonth() + 6);
            
            // Проверяем, не перешли ли мы на следующий день из-за разного количества дней в месяцах
            // (например, 31 августа + 1 месяц = 1 октября)
            if (secondDate.getDate() !== firstDate.getDate()) {
                secondDate.setDate(0); // Устанавливаем последний день предыдущего месяца
            }
            
            // Форматируем дату в формат YYYY-MM-DD для поля ввода
            const year = secondDate.getFullYear();
            const month = String(secondDate.getMonth() + 1).padStart(2, '0');
            const day = String(secondDate.getDate()).padStart(2, '0');
            const formattedDate = `${year}-${month}-${day}`;
            
            // Устанавливаем значение во второе поле
            document.getElementById('secondDate').value = formattedDate;
        }
    </script>
</body>
</html>

Этот код:

  1. Создает форму с двумя полями для ввода даты и кнопкой
  2. При нажатии на кнопку считывает дату из первого поля
  3. Добавляет к ней 6 месяцев с учетом особенностей JavaScript Date (корректировка дней месяца)
  4. Записывает результат во второе поле, которое сделано readonly

Особенности обработки дат:

  • Если исходная дата – например, 31 августа, то через 6 месяцев будет 28/29 февраля (для невисокосного/високосного года)
  • Код корректирует такие случаи, устанавливая последний день месяца

Добавить комментарий