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

Question

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

Navigation

#1 by (7 votes)
#2 by (1 votes)

4

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

What can it 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

Mozilla

javascript google-chrome firefox

asked by anonymous 16.10.2017 / 19:46

2 answers

1

UPDATE

To increase compatibility with browsers, change lines (IE does not support forEach ):

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

By:

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 type="date" and create the date differently. Just check for the first input with 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>

17.10.2017 / 14:19

.Net Core, Dapper and Visual Studio Code? Complete observations in a data frame

score 7 · Accepted Answer

Why does your code work in Chrome?

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];

Google Chrome understands type=date then returned value will be Ano-Mês-Dia . Split in Ano-Mês-Dia will not separate for anything, so concatenation of result will be undefined + undefined + valor . That's why your code does not work.

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

Change type='date' to 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

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

The response writer says:

I would not trust this kind of input right now. It would be nice to have, but I do not foresee that this really does. Reason # 1 is that it places too much load in the browser to determine the best user interface for a rather complicated entry. Think about it from a perspective responsive, as all suppliers would know what will work best with your UI, with 400 pixels, 800 pixels and 1200 pixels of 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>