Add months to a date in an input with javascript

1

I found a JS that increases the months to a date but only works when the month is January (01), that is, if I put 10/01/2019 and I add 9 months it executes: 10/10/2019.

But if I put 10/05/2019 it executes: 02/10/2053.

Someone can help me with this JS. Thank you!

function Add12(hi){
 var obj=document.getElementById('MyDate');
 var obj2=document.getElementById('MyDate2');
 var val=obj.value;
 var date=new Date(val.split('/')[2],(val.split('/')[1]-1+(hi[1]?hi:"0"+hi[0])),val.split('/')[0]);
 obj2.value=Format(date.getDate())+'/'+Format((date.getMonth()+1))+'/'+date.getFullYear();
}
function Format(nu){
 if (nu<10){ nu='0'+nu; }
 return nu;
}
<ul>
<li>Usen 10/01/2019: Funciona!</li>
<li>Usen 10/08/2019: Sale mal!</li>
</ul>
<input id="MyDate" value="" placeholder="DD/MM/AAAA">

<h5>Agregar meses:</h5>
<ul>
  <li>
    <label for="" onclick="Add12(this.children[0].getAttribute('value'));"><input type="radio" name="mes" value="9">9 meses</label>
    <label for="" onclick="Add12(this.children[0].getAttribute('value'));"><input type="radio" name="mes" value="10">10 meses</label>
    <label for="" onclick="Add12(this.children[0].getAttribute('value'));"><input type="radio" name="mes" value="12">12 meses</label>
  </li>
</ul>
<div id="holi"></div>
<input id="MyDate2" value="" placeholder="Fecha final" >
    
asked by lualescalante 27.12.2017 в 18:03
source

2 answers

0

The error is in the month parameter to construct the date new Date(año,mes,día) since the data is strings both the function parameter hi and the split that it performs at the date of input and when adding give a string with greater numerical internal value.

Demo of the result of your Example

var val = '10/05/2019'; 
var hi = '9';
var mes = (val.split('/')[1]-1+(hi[1]?hi:"0"+hi[0]));
console.log(mes);

This value 409 is what really happens to the constructor and if we subtract the 7 months needed to reach 2020 would be 402 and if this value is divided between 12 months per year, does not give 33 , then if we add these values will not give 2053 (2020 + 33) which is the end result that throws its function.

To improve this function, it would be better if values with parseInt() were converted to full, as well as making only once the split to the value of the date entered (Possible final result)

function Add12(hi){
 var obj=document.getElementById('MyDate');
 var obj2=document.getElementById('MyDate2');
 var val=obj.value.split('/');
 var date=new Date(
 		val[2],
 		(parseInt(val[1]-1)+parseInt((hi[1]?hi:0+hi[0]))),
 		val[0]
 	);
 obj2.value = date.toLocaleDateString();
}
<input id="MyDate" value="" placeholder="DD/MM/AAAA">

<h5>Agregar meses:</h5>
<ul>
  <li>
    <label for="" onclick="Add12(this.children[0].getAttribute('value'));"><input type="radio" name="mes" value="9">9 meses</label>
    <label for="" onclick="Add12(this.children[0].getAttribute('value'));"><input type="radio" name="mes" value="10">10 meses</label>
    <label for="" onclick="Add12(this.children[0].getAttribute('value'));"><input type="radio" name="mes" value="24">12 meses</label>
  </li>
</ul>
<div id="holi"></div>
<input id="MyDate2" value="" placeholder="Fecha final" >
    
answered by 27.12.2017 / 19:52
source
0

To work with any Date () you only need to work with the properties of getMonth () and setMonth () of the dates. These methods return numerical values, which are necessary to perform the operation,

var obj=document.getElementById('MyDate');
var obj2 = document.getElementById('MyDate2');
var obj3 = document.getElementById('MyDate3');
obj.value = setFormato(new Date());

function AddMes(){
 var fecha = new Date(obj.value);
 fecha.setMonth( fecha.getMonth() + +(obj2.value));
 obj3.value = setFormato(fecha);
}

function setFormato(fecha){
    var day = ("0" + fecha.getDate()).slice(-2);
    var month = ("0" + (fecha.getMonth() + 1)).slice(-2);
    var date = (month)+"-"+(day)+"-"+fecha.getFullYear();
    return date;
}
<input id="MyDate" value="">
<input id="MyDate2" value="" placeholder="Sumar meses" onChange="AddMes()">
<input id="MyDate3" value="" placeholder="Resultado final" disabled>
    
answered by 27.12.2017 в 19:19