0

Нужно от одной даты отнять другую дату. Первая дата это так которую вводит пользователь, а вторая это сегодняшняя дата. Сегодняшнюю дату я нахожу с помощью метода new Date(); А ту которую ввел пользователь я вытаскиваю из HTML через id.

Проблема в том что эти даты выводятся в разных форматах. Хочу преобразовать их в формат гггг/мм/дд . Перваяя дата у меня в формате гггг/мм/дд , а вторая в вот таком Sun Apr 14 2019 00:00:00 GMT+0300 (Восточная Европа, летнее время) . Я кину код может кто посмотрит и сможет помочь мне. И еще вопрос, если все таки получится получить дату в одинковых форматах, её можно будет отнять одна от другой?

var form = document.getElementById('form'); //получаю форму по айди

        form.addEventListener('submit',function(e){ // ставлю на форму слушатель событий ра екшен submit(когба будет нажата кнопка с типом submit в форме), вторым аргументом идёт функция что сработает если произойдёт событие, в ней переменая e(название может быть любое), в которой всякие штуки для обраюотки события
            valid(form);//вызываю ту фукнции и передаю в неё форму
            e.preventDefault();//отменяю стандартное поведение события submit(обновление страници)
        })


        function valid (form) {
            
            var name = form.name.value; // тут я обьявил переменную имя и как я понял привязал её к кнопке
            var fail; // просто переменная в которую заносится ошибка
            
            
            var today_date = new Date(); // сегоднещняя дата
            // dateformat (today_date, 'DD.MM.YYYY');
            var input_date = form.date.value; // дата введенная пользователем
            
            var result_date = today_date - input_date; // от текущей даты отнимаем введенную дату
            // var old = result_date / 365; // от нашего результата считаем сколько лет пользователю
            
            alert(input_date); 
            

           alert(today_date);

            
            
            
            
            
            if (name == "" || name==" ") 
                // fail = alert('Вы не ввели свое имя');
                document.getElementById('forName').style.display = 'block';
            
                
            else if (document.getElementById('men').checked) {
               alert('Вы мужчина!'); 
            }
                
            //
            //
            else if (document.getElementById('women').checked) {
                alert('Вы женщина!');
            }
                
                
            //
            //
            
        }
form {
    border: 1px solid red;
    display: block;
    width: 100%;
}
.input_name {
    display: inline-flex;
    flex-direction: row;
}
.input_name input {
    margin: 0 10px 0 10px;
}
#forName {
    display: none;
    color: red;
}
#myButton {
    display: inline-block;
    color: #000;
    font-weight: 700;
    text-decoration: none;
    padding: 0.5% 1%;
    outline: none;
    border: 1.5px solid #000;
    border-radius: 2px;
    background: #fff;
}
#myButton:hover {
    cursor: pointer;
    background: rgba(0,0,0,0.1);
    transition: 0.2s;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form registration on JavaScript</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="">
</head>
<body>
    
    
    
    
    <form action="" method="post" name="form" id="form">
        
        <div class="input_name">
            <label class="for_name" for="name">Имя:</label>
            <input class="for_name" type="text" placeholder="Введите своё имя" id="name" name="name">
            <div class="for_name" id="forName">
                <p style="margin: 0;"><img src="img/red-cross.png" alt="Red cross" style="margin-top: 2.5px;"> Вы не ввели имя</p>
            </div>
        </div>
        
        
        <br><br>
        
        <span>Выберите пол:</span>
        <input type="radio" id="men" name="status" value="men">
        <label for="men">Мужской</label>
        <input type="radio" id="women" name="status" value="women">
        <label for="women">Женский</label>
        
        <br><br>
        
        <label for="date">Дата рождения:</label>
        
        <input type="date" id="date" name="date">
        
        
        
        
        
        
        <br><br>
        
       
        
        <input type="submit" value="Проверить" name="submit" id="myButton"/> 
        
        
    </form>
    
    
    
    

     <script type="text/javascript" src="script.js"></script> 

</body>
</html>

Заранее спасибо за помощь

2 ответа 2

1

У Вас имеется один объект Date() и поле ввода типа date. В документации указывается что

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

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

document.getElementById("okBtn").addEventListener("click", function(ev){

    var dateStr = document.getElementById("date").value;
    if(!dateStr) {
        alert("Дата не введена");
        return;
    }

    // Создание объекта Date из даты введённой пользователем
    // и текущего времени
    var date = new Date(dateStr), now = new Date();

    // "Грубое" вычисление возраста и разницы между месяцами и днями
    var age = now.getYear() - date.getYear(),
        monthDiff = now.getMonth() - date.getMonth(),
        dayDiff = now.getDate() - date.getDate();
    // проверяем наступил ли день рождения в текущем году
    // и если ещё не наступил, то уменьшаем возраст
    if(monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
        age--;
    }
    document.getElementById("age").innerHTML = age;
}, false);
<p>
  <input type="date" id="date" />
  <button id="okBtn">OK</button>
</p>
<p>
Age: <span id="age"></span>
</p>

... если все таки получится получить дату в одинаковых форматах, её можно будет отнять одна от другой?

Если мы говорим о двух объектах Date, то "да". Как правило в таких случаях получают значение миллисекунд дат и производят дальнейшие манипуляции уже с ними. Например здесь приведены несколько примеров манипуляций с датами.

3
  • Спасибо большое, очень помогли! Еще есть такой вопрос, а как задать условие чтобы если пользователь не ввел дату, то была ошибка?)
    – O.Yudin
    15 мая 2019 в 14:27
  • 1
    @Lisenok поправил в коде.
    – XelaNimed
    15 мая 2019 в 18:01
  • Спасибо, вы мне очень помогли. Я новичек в JS и уже месяц делаю это задание))) Буду знать теперь, большое спасибо!
    – O.Yudin
    15 мая 2019 в 18:06
0

Проще всего использовать библиотеку Moment.js

Подключается вот так:

<script src="moment.js"></script>
<script>
    moment().format();
</script>

Вам необходимо распарсить дату которую ввёл пользователь(полная документация по парсингу) Примерно вот так var day = moment("1995-12-25");

И отобразить(полная документация) примерно вот так:

moment().format();                                // "2014-09-08T08:02:17-05:00" (ISO 8601, no fractional seconds)
moment().format("dddd, MMMM Do YYYY, h:mm:ss a"); // "Sunday, February 14th 2010, 3:25:50 pm"
moment().format("ddd, hA");                       // "Sun, 3PM"

Вычитать одну дату из другой лучше всего пока обе даты в Integer.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.