Хотите рассчитать дату рождения с данного возраста

Question

Я пытаюсь рассчитать дату рождения с данного возраста. Моя логика

Когда мы входим в возраст, говорите «5». Дата рождения будет рассчитана как ровно 5 лет с текущей даты. Пример текущей даты: 20/8/2018. Тогда дата рождения будет 20/8/2013, если возраст 5 лет. Ниже приведен мой код:

function validatedob() {
  var dob_value = document.getElementById('dob').value;
  var age_value = document.getElementById('age').value;
  var current_date = new Date();
  var birth_date = new Date();
  var birth_year = current_date.getFullYear() - age_value;
  var birth_month = current_date.getMonth();
  var birth_day = current_date.getDate();

  birth_date.setDate(current_date.getFullYear() - age_value);
  birth_date.setMonth(current_date.getMonth());
  birth_date.setFullYear(current_date.getDate());

  document.getElementById('dob').setDate(birth_day);
  document.getElementById('dob').setMonth(birth_month);
  document.getElementById('dob').setFullYear(birth_year);
}

<div class="form-inline" id="Age">
  <label for="age">Age</label>
  <input id="age" type="integer" name="age" onchange="validatedob()">
</div>

<div class="form-inline" id="birth">
  <label for="DOB">Date of Birth</label>
  <input id="dob" type="date" value="Unknown" name="date_of_birth" max="31-12-2030">
</div>

Это не работает. Я не хорошо с html-свойствами. Кто-нибудь может мне помочь? как этого добиться?

javascript html

0

Devender Gupta 20 Авг 2018 в 18:14

Answer 1

Вот действительно простое решение, которое работает и некоторые изменения в вашем HTML.

Изменения в HTML:

div и label оба имеют идентификатор "age", это должно быть уникально.
type="integer" не существует, поэтому я изменил его на type="number".
И value="unknown" не правильный формат "гггг-ММ-дд", поэтому я просто удалил его.
for="DOB" на for="dob", теперь это тоже работает

Код:

HTML

<div class="form-inline">
    <label for="age">Age</label>
    <input id="age" type="number" name="age"onchange="validatedob()">
</div>
<div class="form-inline" id="birth">
    <label for="dob">Date of Birth</label>
    <input id="dob" type="date" name="date_of_birth" max="31-12-2030">
</div>

JavaScript

function validatedob() {
    var age_value = document.getElementById("age").value;
    var current_date = new Date();
    var birth_date = new Date(current_date.getFullYear() - age_value, current_date.getMonth(), current_date.getDate() + 1);

    document.getElementById("dob").valueAsDate = birth_date;
}

1

Vic Segers 20 Авг 2018 в 15:59

Answer 2

Вот пример кода для справки

https://codepen.io/ji_in_coding/pen/wEvoMK

<div class="form-inline" id="Age">
   <label for="age">Age</label>
   <input id="age" type="integer" name="age" onchange="validatedob()">          
</div>

  <div class="form-inline" id="birth" >
    <label for="DOB">Date of Birth</label>
    <input id="dob" type="input" name="date_of_birth">                     
</div>

Javascript

function validatedob()
{
  var age_value = document.getElementById("age").value;
  var today = new Date();
  var calculated_birthday = new Date(
    parseInt(today.getFullYear())+parseInt(age_value), 
    today.getMonth(), 
    today.getDate());
  document.getElementById("dob").value = calculated_birthday.toLocaleDateString("en-US");
}

1

Ji_in_coding 20 Авг 2018 в 15:37

Answer 3

Вот простой ответ:

> d1 = new Date(2018, 00, 01)
Date 2018-01-01T00:00:00.000Z
> d2 = new Date(d1.getFullYear() - 5, d1.getMonth(), d1.getDate())
Date 2013-01-01T00:00:00.000Z

Но я бы предложил использовать такую библиотеку, как Luxon.

Манипулирование датами - абсолютный кошмар, если вы делаете это самостоятельно. Это видео из Computerphile обобщает это лучше, чем я мог:
https://www.youtube.com/watch?v=-5wpm-gesOY

2

Emmanuel Bourgerie 20 Авг 2018 в 15:25

Answer 4

У вас проблема в том, что вы пытаетесь setDate и напасть на HTMLElement. Входные данные dob ожидают строку в формате yyyy-MM-dd. Вы можете попробовать что-то вроде этого:

var $dob = document.getElementById('dob');
var $age = document.getElementById('age');

function validatedob() {
  var age = $age.value;
  var date = new Date();
  date.setFullYear(date.getFullYear() - age);
  $dob.value = formatDate(date);
}

function formatDate(date) {
    var d = new Date(date),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear();

    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;

    return [year, month, day].join('-');
}

<div class="form-inline" id="Age">
  <label for="age">Age</label>
  <input id="age" type="integer" name="age" onchange="validatedob()">
</div>

<div class="form-inline" id="birth">
  <label for="DOB">Date of Birth</label>
  <input id="dob" type="date" value="Unknown" name="date_of_birth" max="31-12-2030">
</div>

PS: в целях производительности избегайте повторения document.getElementById(...) при каждом вызове метода. Сделайте это один раз, как в моем примере.

1

Alexandre Annic 20 Авг 2018 в 15:43

Новые вопросы

javascript

Хотите рассчитать дату рождения с данного возраста

4 ответа

Похожие вопросы