Dúvida evento "onchange", componente input

TOTVS Fluig Documentos (ECM)
, , ,
1

Olá,

Estou tentado utilizar o evento "onchange" através chamada campo input porém sem sucesso.

HTML:


<div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6">
        <div class="form-group">                            
            <label for="DTINICIO">Data Início</label>
            <span class="required text-danger"><strong> *</strong></span>
            <input type="text" class="form-control" name="DTINICIO" id="DTINICIO" onchange="diasAtestado()">
        </div>
    </div>

    <div class="col-xs-6 col-sm-6 col-md-6">
        <div class="form-group">                            
            <label for="DTFINAL">Data Final do Atestado</label>
            <span class="required text-danger"><strong> *</strong></span>
            <input type="text" class="form-control" name="DTFINAL" id="DTFINAL" onchange="diasAtestado()">
        </div>
    </div>
</div>

Java Scritp:


$(document).on('change', "#DTINICIO", function diasAtestado() {
    alert("entrei");
    $("#DIASATESTADO").val($("#DTFINAL").val().getTime() - $("#DTINICIO").val().getTime());
})
$(document).on('change', "#DTFINAL", function diasAtestado() {
    alert("entrei");
    $("#DIASATESTADO").val($("#DTFINAL").val().getTime() - $("#DTINICIO").val().getTime());
})

A ideia seria disparar o evento quando uma das data for alterada. Estou utilizando essa lógica em formulário Fluig 1.6.4.

Obrigado, []s

2

Bom dia Leandro, Você não precisa definir o evento onchange no seu HTML, basta utilizar o evento change no jQuery para o campo em questão. Adicione o trecho abaixo no seu custom.js Ficaria mais ou menos assim:


$("#DTINICIO").change(function () {
    alert("entrei");
    $("#DIASATESTADO").val($("#DTFINAL").val().getTime() - $("#DTINICIO").val().getTime());
});

$("#DTFINAL").change(function () {
    alert("entrei");
    $("#DIASATESTADO").val($("#DTFINAL").val().getTime() - $("#DTINICIO").val().getTime());
});
3

@Leandro,

Tente fazer dessa forma:


$(document).on('change', "#DTINICIO", function() {
    alert("entrei");
    $("#DIASATESTADO").val($("#DTFINAL").val().getTime() - $("#DTINICIO").val().getTime());
})
$(document).on('change', "#DTFINAL", function() {
    alert("entrei");
    $("#DIASATESTADO").val($("#DTFINAL").val().getTime() - $("#DTINICIO").val().getTime());
})
4

Obrigado a todos! Todas as soluções dariam certo... entretanto utilizei da seguinte maneira:

HTML:


<div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6">
        <div class="form-group">                            
            <label for="DTINICIO">Data Início</label>
            <span class="required text-danger"><strong> *</strong></span>
            <input type="text" class="form-control" name="DTINICIO" id="DTINICIO">
        </div>
    </div>

    <div class="col-xs-6 col-sm-6 col-md-6">
        <div class="form-group">                            
            <label for="DTFINAL">Data Final do Atestado</label>
            <span class="required text-danger"><strong> *</strong></span>
            <input type="text" class="form-control" name="DTFINAL" id="DTFINAL">
        </div>
    </div>
</div>

Java script:


$(document).on('change', "#DTINICIO", function() {
    if ($("#DTINICIO").val() != "" && $("#DTFINAL").val() != "") {
         var a = moment($("#DTINICIO").val(),'D/M/YYYY'); 
         var b = moment($("#DTFINAL").val(),'D/M/YYYY'); 
         var diffDays = b.diff(a, 'days'); 
    } else {
        $("#DIASATESTADO").val(0);
    }        
})
$(document).on('change', "#DTFINAL", function() {    
    if ($("#DTINICIO").val() != "" && $("#DTFINAL").val() != "") {
         var a = moment($("#DTINICIO").val(),'D/M/YYYY'); 
         var b = moment($("#DTFINAL").val(),'D/M/YYYY'); 
         var diffDays = b.diff(a, 'days');
    } else {
        $("#DIASATESTADO").val(0);
    }
})

Para obter a diferença entre "Data Inicia" e "Data Final" (Em dias), utilizei métodos javascript do pack "moment.js" Download aqui: https://momentjs.com/

Obrigado []s.

5

Leandro como vc implementou esse moments. Estou tentando implementar aki para utilizar no Gateway mas nao consigo. Poderia me dar uma luz?

6

Opa, Rafael…
Em seu projeto, dentro da pasta “forms/SeuFormulario”, crie uma pasta “js” e inclua o arquivo “moment.js” entro da pasta.
No “HTML”, tag “head”, adicione

<script type="text/javascript" src="SeuFormulario/js/moment.js"></script>

Exemplo chamada no javascript…
var a = moment($(“#DTINICIO”).val(),‘D/M/YYYY’);