Function calculates date and returns invalid date

1

I have the following code:

 //função exibe data de hoje no campo cancelamento
			function Data(){
            data = new Date();
            dia = data.getDate();
            mes = data.getMonth()+1;
            ano = data.getFullYear();
          		if (dia <10){
              dia ='0'+dia;
            }
          	if (mes <10){
              mes ='0'+mes;	
            }
          	dataCompleta = dia+'/'+mes+'/'+ano;
						
            return dataCompleta;
        }
        
        window.onload = function(){
            document.getElementById("cancelamento").value = Data();
        }
        function calculaData(){
			var adesao = new Date (document.retencao.adesao.value);
			var cancelamento = new Date (document.retencao.cancelamento.value);
			var meses = adesao - cancelamento;
			document.getElementById("tempo").value = meses;
			}
        function calculaParcela(){
       var individual = parseFloat(document.retencao.individual.value);
       var dependente = parseFloat(document.retencao.dependente.value);
       var parcela = individual * dependente;
       document.getElementById("parcela").value = parcela.toFixed(2) ; 
       }
       
       function calculaInvestimento(){
		  var vparcela = parseFloat(document.retencao.parcela.value);
		  alert("parcela recebida")
		  var tempo = parseFloat(document.rentencao.tempo.value);
		  alert("recebeu valor do tempo")
		  var investimento = vparcela * tempo;
		  document.getElementById("investimento").value = investimento.toFixed(2) ;           
       }
<!DOCTYPE html>
<html>
  <head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title> Retenção </title>
<script language="javascript" src="javascript/funcoes.js">	</script> 
</head>
  <body>
   	<form name="retencao" >
	<fieldset>
	<legend >Calculo de Investimento</legend>
	<label>Adesão</label>
	<input type="date" id="adesao" name="adesao" required="required" oninput="calculaData()">  
	<!--pega a data de adesão do beneficiario-->	
	<label>Cancelamento</label>
	<input type="text" id="cancelamento" name="cancela" readonly="readonly" size="8" onload="calculaData()">
	<!--data de cancelamento do beneficiario pega a data atual-->	
	<label>Planos</label>
	<select id="seletor" size="1" required="required" name="seletor">
	<!--Para o seletor de planos pensei em um imput select, com a seleção do plano por esse imput preciso 
	que o valor seja retornado no imput individual-->
	<option selected="selected" value="">Selecione o plano</option>
	<option value="29.90">Fundamental</option>		
	</select>
	<label>Dependentes</label>
	<!--Aqui sera informado a quantidade de beneficiarios para calculo no valor da  parcela-->
	<input type="number" value="1" min="1" max="10" id="depedente" name="dependente" required="required" onchange="calculaParcela()">
	<br>		
	<label>Tempo de plano</label>
	<!--Este imput deve receber o resultado de uma conta dos campos adesão e cancelamento da seguinte
	forma =cancelmamento - adesão e retornar a quantidade de meses que o beneficiario permaneceu com o 
	plano -->
	<input type="text" name="tempo" id="tempo" size="10" readonly="readonly" onchange="calculaInvestimento()" >
	<label>Individual</label>
	<!--Recebe valor artibuido ao select com o valor do plano-->
	<input type="text" id="individual" name="individual" size="10" oninput="calculaParcela()" onchange="calculaInvestimento()"  >	
	<label>Parcela</label>
	<!--Parcela recebe a quantidade de dependentes vezes o valor individual-->
	<input type="text" name="parcela" id="parcela" size="10" onchange="calculaInvestimento()">
	<label>Investimento</label>
	<!--Investimento deve mutiplicar a quantidade de meses vezes o valor da parcela para retorno do valor
	investido durante o tempo que o beneficiario permaneceu com o plano-->
	<input type="text" name="investimento" id="investimento" readonly="readonly" size="10">
	<br>
	<input type="submit" value="Calcular">		
	</fieldset>   	
   	</form>
   	
  </body>
</html>

But the account I tried to make with dates says they are invalid. Can someone help me by telling me what's wrong?

    
asked by anonymous 29.06.2017 / 04:37

1 answer

0

1 - oninput="calculaData ()"

The oninput event is similar to onchange . The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus after the content has changed.

I removed this event from input adesao and put the onsubmit event in the form's form tag. <form name="retencao" onsubmit="calculaData()">

2 - The input type = date adesao even though typed in the field in the format dd / mm / yyyy in javascript it enters the American format, ie yyyy-mm-dd.

3 - The date of the input type = text cancelamento is in the format dd / mm / yyyy and javascript is entered in this format.

So you have to format the string from input cancelamento to a valid date format, ie yyyy-mm-dd

  

Script changes: One date format for calculation effect and another for display

 window.onload = function(){
    /formato para calculo
    document.getElementById("cancelamento").value = Data();
    //formato para visualização
    document.getElementById("visualiza").value = dia+'/'+mes+'/'+ano;; 
 } 

COMPLETE SCRIPT

    //função exibe data de hoje no campo cancelamento

        var dia, mes,ano;

        function Data(){
            data = new Date();
            dia = data.getDate();
            mes = data.getMonth()+1;
            ano = data.getFullYear();
                if (dia <10){
              dia ='0'+dia;
            }
            if (mes <10){
              mes ='0'+mes; 
            }
            dataCompleta = ano+'-'+mes+'-'+dia;

            return dataCompleta;
        }

        window.onload = function(){
            //formato para calculo
            document.getElementById("cancelamento").value = Data();
            //formato para visualização
            document.getElementById("visualiza").value = dia+'/'+mes+'/'+ano;; 
        }

    /*função calcula a data com base nos inputs adesão e cancelamento e deve retornar a diverença entre eles em meses*/
        function calculaData(){
            var adesao = new Date (document.retencao.adesao.value);
            var cancelamento = new Date (document.retencao.cancelamento.value);

            var timeDiff = Math.abs(cancelamento.getTime() - adesao.getTime());
            //retorno em dias
            var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); 
            alert("A diferença em dias é " + diffDays);         

        }

HTML

<form name="retencao" onsubmit="calculaData()">
    <fieldset>
    <legend >Calculo de Investimento</legend>
    <label>Adesão</label>
    <input type="date" id="adesao" name="adesao" required="required">  
    <!--pega a data de adesão do beneficiario-->    
    <label>Cancelamento</label>
    <!--data do cancelamento simples visualizaçao-->
    <input style="display:none" type="text" id="cancelamento" name="cancelamento" onload="calculaData()">
    <!--data de cancelamento do beneficiario pega a data atual-->
    <input type="text" id="visualiza" name="visualiza" readonly="readonly" size="8">
    <label>Planos</label>
    <select id="seletor" size="1" required="required" name="seletor">
    <!--Para o seletor de planos pensei em um imput select, com a seleção do plano por esse imput preciso 
    que o valor seja retornado no imput individual-->
    <option selected="selected" value="">Selecione o plano</option>
    <option value="29.90">Fundamental</option>      
    </select>
    <label>Dependentes</label>
    <!--Aqui sera informado a quantidade de beneficiarios para calculo no valor da  parcela-->
    <input type="number" value="1" min="1" max="10" id="depedente" name="dependente" required="required" onchange="Parcela()">
    <br>        
    <label>Tempo de plano</label>
    <!--Este imput deve receber o resultado de uma conta dos campos adesão e cancelamento da seguinte
    forma =cancelmamento - adesão e retornar a quantidade de meses que o beneficiario permaneceu com o 
    plano -->
    <input type="text" name="tempo" id="tempo" size="10" >
    <label>Individual</label>
    <!--Recebe valor artibuido ao select com o valor do plano-->
    <input type="text" id="individual" name="individual" size="10" >    
    <label>Parcela</label>
    <!--Parcela recebe a quantidade de dependentes vezes o valor individual-->
    <input type="text" name="parcela" id="parcela" size="10" onchange="Investimento()">
    <label>Investimento</label>
    <!--Investimento deve mutiplicar a quantidade de meses vezes o valor da parcela para retorno do valor
    investido durante o tempo que o beneficiario permaneceu com o plano-->
    <input type="text" name="investimento" id="investimento" readonly="readonly" size="10">
    <br>
    <input type="submit" value="Calcular">      
    </fieldset>     
</form>>
    
29.06.2017 / 05:07