Why does type='date' not work in Firefox?

Asked

Viewed 277 times

4

I was testing a script to calculate interest and realized that my code does not work on Google Chrome, but if I open the same script on Mozilla it works perfectly.

I wonder what it might be?

    elementsArray = document.querySelectorAll('input');
    elementsArray.forEach(function(elem) {
        elem.addEventListener("input", function() {
            calcula();
        });
    });

    function calcula() {
        vencimento = document.getElementById("datavenc").value;
        pagamento = document.getElementById("datapag").value;

        venc_array = vencimento.split("/");
        vencimento = venc_array[2] + "-" + venc_array[1] + "-" + venc_array[0];

        pagt_array = pagamento.split("/");
        pagamento = pagt_array[2] + "-" + pagt_array[1] + "-" + pagt_array[0];


        d1 = new Date(vencimento);
        d2 = new Date(pagamento);

        dias_atraso = parseInt((d2 - d1) / (24 * 3600 * 1000));

        valortit = parseFloat(document.getElementById("valortitulo").value);
        outrasdesp = document.getElementById("despesas").value;
        outrasdesp = (outrasdesp == "") ? 0 : parseFloat(outrasdesp);

        juros = ((valortit * .05) / 30) * (dias_atraso);

        if (!isNaN(dias_atraso) && !isNaN(juros)) {
            document.getElementById("diasematraso").value = dias_atraso;
            document.getElementById("juros").value = juros.toFixed(2).replace(".", ",");
            document.getElementById("valortotal").value = (valortit + juros + outrasdesp).toFixed(2).replace(".", ",");
        }
    }
<fieldset style="position:relative; height:200px;  float:left;  width:360px;">
    <legend>Calcular Juros</legend>

    <label>Data de Vencimento:</label>
    <input id="datavenc" type="date" class="form-control" /><br />

    <label>Data de Pagamento: </label>
    <input id="datapag" type="date" class="form-control" /><br />

    <label>Valor do Titulo: </label>
    <input id="valortitulo" type="text" class="form-control" /><br />

    <label>Outras Despesas: </label>
    <input id="despesas" type="text" class="form-control" /><br />
    <br />

    <label>Dias em Atraso: </label>
    <input id="diasematraso" type="text" class="form-control" disabled/><br />

    <label>Juros: </label>
    <input id="juros" type="text" class="form-control" disabled/><br />

    <label>Valor Total a Pagar: </label>
    <input id="valortotal" type="text" class="form-control" disabled/>
</fieldset>

Google Chrome

inserir a descrição da imagem aqui

Mozilla
inserir a descrição da imagem aqui

javascript google-chrome firefox

  • I removed my answer for the following reason: When testing on my Notebook using the Chromium browser, the code did not work, but when testing on Google Chrome it worked, stating the current date as due and the payment date 10 days later, with the value of R$ 500 obtained the interest value R$ 8,33 this certain ?

  • Yes, the script is to calculate interest of late slips.

  • @Smokerohden explained why his code doesn’t work on both browsers and changed the title of his question to get a little wider reaching more readers.

2 answers

7


Why your code works in Chrome?

The type='date' is not supported by Firefox.

In this part of the code both browsers will generate different results.

 venc_array = vencimento.split("/");
 vencimento = venc_array[2] + "-" + venc_array[1] + "-" + venc_array[0];

 pagt_array = pagamento.split("/");
 pagamento = pagt_array[2] + "-" + pagt_array[1] + "-" + pagt_array[0];

The Google Crome understands the type=date then value returned will be Ano-Mês-Dia. Split in Ano-Mês-Dia will not separate by anything, so the concatenation of the result will be undefined + undefined + valor. That’s why your code doesn’t work.

The Mozila Firefox will return Dia/Mês/Ano resulting in a correct calculation.

Exchange the type='date' for type='text' and the code will work in both browsers.

How to get HTML 5 input type="date" Working in Firefox and/or IE 10

The type=date is not a real specification at this time. It is a concept that the Google came and is in its specifications(unofficial) and is partially supported by Chrome.

The author of the answer says:

I wouldn’t trust that kind of input right now. It would be nice to have, but I do not foresee that this actually does. The reason n.° 1 is that it puts too much load in the browser to determine the best user interface for a somewhat complicated entrance. Think of it from a perspective responsive, as all suppliers would know what will work better with your UI, with 400 pixels, 800 pixels and 1200 pixels width?

function calcula() {
    vencimento = document.getElementById("datavenc").value;
    pagamento = document.getElementById("datapag").value;

    venc_array = vencimento.split("/");
    vencimento = venc_array[2] + "-" + venc_array[1] + "-" + venc_array[0];

    pagt_array = pagamento.split("/");
    pagamento = pagt_array[2] + "-" + pagt_array[1] + "-" + pagt_array[0];

    d1 = new Date(vencimento);
    d2 = new Date(pagamento);

    var dias_atraso = parseInt((d2 - d1) / (24 * 3600 * 1000));

    valortit = parseFloat(document.getElementById("valortitulo").value);
    outrasdesp = document.getElementById("despesas").value;
    outrasdesp = (outrasdesp == "") ? 0 : parseFloat(outrasdesp);

    var juros = ((valortit * .05) / 30) * (dias_atraso);

    if (!isNaN(dias_atraso) && !isNaN(juros)) {
        document.getElementById("diasematraso").value = dias_atraso;
        document.getElementById("juros").value = juros.toFixed(2).replace(".", ",");
        document.getElementById("valortotal").value = (valortit + juros + outrasdesp).toFixed(2).replace(".", ",");
    }
}
<fieldset style="position:relative; height:200px;  float:left;  width:360px;">
    <legend>Calcular Juros</legend>

    <label>Data de Vencimento:</label>
    <input id="datavenc" type="text" class="form-control" />
    <br />

    <label>Data de Pagamento: </label>
    <input id="datapag" type="text" class="form-control" />
    <br />

    <label>Valor do Titulo: </label>
    <input id="valortitulo" type="text" class="form-control" />
    <br />

    <label>Outras Despesas: </label>
    <input id="despesas" type="text" class="form-control" />
    <br />
    <br />
    <button onclick='calcula()'>Calcula</button>
    <label>Dias em Atraso: </label>
    <input id="diasematraso" type="text" class="form-control" disabled/>
    <br />

    <label>Juros: </label>
    <input id="juros" type="text" class="form-control" disabled/>
    <br />

    <label>Valor Total a Pagar: </label>
    <input id="valortotal" type="text" class="form-control" disabled/>
</fieldset>

1

UPDATING

To increase browser compatibility, switch lines (IE does not support forEach):

elementsArray = document.querySelectorAll('input');
elementsArray.forEach(function(elem) {
   elem.addEventListener("input", function() {
     calcula();
   });
});

For:

elementsArray = document.getElementsByTagName('input');
for(x=0;x<elementsArray.length;x++){
    elementsArray[x].addEventListener("input", function(){
        calcula();
    });
}

You can check if the browser does not support the type="date" and create the date differently. Just check by the first input with the type="date":

if(document.getElementById("datavenc").type !== "date"){
    // para o Firefox e IE que não suportam type="date"
    venc_array = vencimento.split("/");
    pagt_array = pagamento.split("/");
    vencimento = venc_array[2] + "-" + venc_array[1] + "-" + venc_array[0];
    pagamento = pagt_array[2] + "-" + pagt_array[1] + "-" + pagt_array[0];
}


elementsArray = document.getElementsByTagName('input');
for(x=0;x<elementsArray.length;x++){
	elementsArray[x].addEventListener("input", function(){
		calcula();
	});
}

function calcula(){
	vencimento = document.getElementById("datavenc").value;
	pagamento = document.getElementById("datapag").value;

	if(document.getElementById("datavenc").type !== "date"){
		venc_array = vencimento.split("/");
		pagt_array = pagamento.split("/");
		vencimento = venc_array[2] + "-" + venc_array[1] + "-" + venc_array[0];
		pagamento = pagt_array[2] + "-" + pagt_array[1] + "-" + pagt_array[0];
	}


	d1 = new Date(vencimento);
	d2 = new Date(pagamento);

	dias_atraso = parseInt((d2 - d1) / (24 * 3600 * 1000));

	valortit = parseFloat(document.getElementById("valortitulo").value);
	outrasdesp = document.getElementById("despesas").value;
	outrasdesp = (outrasdesp == "") ? 0 : parseFloat(outrasdesp);

	juros = ((valortit * .05) / 30) * (dias_atraso);

	if (!isNaN(dias_atraso) && !isNaN(juros)) {
		document.getElementById("diasematraso").value = dias_atraso;
		document.getElementById("juros").value = juros.toFixed(2).replace(".", ",");
		document.getElementById("valortotal").value = (valortit + juros + outrasdesp).toFixed(2).replace(".", ",");
	}
}
<fieldset style="position:relative; height:200px;  float:left;  width:360px;">
   <legend>Calcular Juros</legend>

   <label>Data de Vencimento:</label>
   <input id="datavenc" type="date" class="form-control" /><br />

   <label>Data de Pagamento: </label>
   <input id="datapag" type="date" class="form-control"/><br />

   <label>Valor do Titulo: </label>
   <input id="valortitulo" type="text" class="form-control"/><br />

   <label>Outras Despesas: </label>
   <input id="despesas" type="text" class="form-control"/><br />
   <br />

   <label>Dias em Atraso: </label>
   <input id="diasematraso" type="text" class="form-control" disabled/><br />

   <label>Juros: </label>
   <input id="juros" type="text" class="form-control" disabled/><br />

   <label>Valor Total a Pagar: </label>
   <input id="valortotal" type="text" class="form-control" disabled/>
</fieldset>

Browser other questions tagged javascript google-chrome firefox

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