Function calculates date and returns invalid date

Asked

Viewed 213 times

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 the dates say that they are invalid. Can anyone help me by telling me what is wrong?

javascript html

  • I’m not saying that the mistake is because of this, but it’s good to know: The event oninput is similar to onchange. The difference is that the event oninput occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus, after the content has been changed.

  • I do not mean that with this indication of this post you should accept my answer. https://pt.meta.stackoverflow.com/questions/1078/como-e-por-que-aceitar-uma-resposta/1079#1079

1 answer

0


1 - oninput="calculaData()"

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

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

2 - The input type=date adesao despite typing in the field in the format dd/mm/yyyy in javascript it enters the American format, i.e., yyyy-mm-dd.

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

So you have to format the string from input cancelamento for a valid date format, i.e., yyyy-mm-dd

Script changes: a date format for calculation 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;; 
 }

FULL 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>>

  • I made some changes to the code and to very close to the desired effect for this code as the comments in html and javascript will update my code so you continue helping me, referring to your suggestion I found interesting but I intend to put another script there that will be the investment calculator

  • how do I enter date in the format valid for calculation Leo Caracciolo

  • thanks for the problem solved help

  • but we can already solve now I have another problem more to be prevented from asking new questions for 24 hrs in a went there very successful in the first rsrs

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.