1

Estou tentando manipular datas com jQuery. A ideia é a seguinte:

O usuário informa a Data_vencimento e o tipo (no radio button), se o vencimento será semanal, quinzenal, mensal ou informado.

No input informado, o usuário vai digitar a quantidade de dias (por exemplo, 20 dias) para que o jQuery possa calcular os vencimentos.

Exemplo:

  1. O usuário informa a data de vencimento: 14/11/2018;
  2. Usuário seleciona o vencimento semanal;
  3. O jQuery calcula e preenche o value do input #dt_venc1 com a data 21/11/2018. (14 + 7).

Só que o alert(dtVenc1) retorna um NaN.

Como se manipula datas com jQuery? Parece que manipular com datas com o PHP é bem mais fácil. Mas com o jQuery, seria independente de linguagem utilizada.

$(document).ready( function () {
    $('#data_vencimento').on('blur', function() {
        alert('Usuário utilizando o input "DATA_VENCIMENTO"');
        var dtVenc = new Date();
        var dtVenc1 = new Date();
        dtVenc = $('#data_vencimento').val();
        dtVenc1 = dtVenc1.setDate(dtVenc1 + 7);
        alert(dtVenc);
        alert(dtVenc1);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
     <div class="form-group col-md-2">
          <label class="control-label" for="data_vencimento">Data Vencimento *</label>
          <input type="text" class="form-control datepicker required" name="data_vencimento" id="data_vencimento">
     </div>

     <div class="form-group col-md-2">
          <label class="control-label" for="data_prorrogacao">Data Prorrogacao</label>
          <input type="text" class="form-control datepicker" name="data_prorrogacao" id="data_prorrogacao">
     </div>
</div>

<div class="row">
     <div class="form-check form-check-radio form-check-inline">
          <label class="form-check-label" >Tipo de Parcelamento:</label>
          	<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="SEMANAL"> Semanal
          	<span class="circle">
                	<span class="check"></span>
          	</span>
          </label>
     </div>
     <div class="form-check form-check-radio form-check-inline">
          <label class="form-check-label">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="QUINZENAL" checked="checked"> Quinzenal
                     <span class="circle">
                           <span class="check"></span>
                     </span>
          </label>
     </div>
          <div class="form-check form-check-radio form-check-inline">
               <label class="form-check-label">
                     <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="MENSAL" checked="checked"> Mensal
                            <span class="circle">
                                  <span class="check"></span>
                            </span>
               </label>
     </div>
     <div class="form-check form-check-radio form-check-inline">
          <label class="form-check-label">
               <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4" value="INFORMADO"> Informado
                   <span class="circle">
                         <span class="check"></span>
                   </span>
          </label>                           
     </div>
     <div class="col-md-2">
          <div class="form-group has-label">
               <label class="bmd-label-floating" for="dias">Qtd. dias</label>
               <input class="numero form-control" type="text" name="dias" size="03" 
                      id="dias">
          </div>
     </div>
</div>

4 Respostas 4

1

Você quase acertou..

ao invés de utilizar:

dtVenc1 = dtVenc1.setDate(dtVenc1 + 7);

Tente:

dtVenc1 = dtVenc1.setDate(dtVenc1.getDate() + 7);
1

Eu utilizaria a biblioteca MomentJS para trabalhar com datas/horas, segue o link:

https://momentjs.com/

Na minha opinião a melhor solução para cálculos complexos utilizando estes formatos.

1
  • 1
    Obrigado, vou dar uma olhada nessa biblioteca.
    – Ivan
    Commented 25/11/2018 às 17:29
1

Algo parece estranho, O usuário informa a Data_vencimento.

Acredito que se deva calcular a data de vencimento a partir da data atual!

sendo assim é como segue.

A data deveria ser somente para leitura, mas poderia ser também oculta, pois o vencimento é a partir da data atual e isso todos sabemos.

//pego a data atual para colocar automaticamente no campo data
var today = new Date();
document.getElementById("data_vencimento").value =('0' + today.getDate()).slice(-2) + '/' + ('0' + (today.getMonth() + 1)).slice(-2) + '/' + today.getFullYear();

$(document).ready( function () {

 $("button").click(function(){

 // Tratamento das Variaveis.
        var txtData = $('#data_vencimento').val();
        /*##### se selecionar o input radio com valor = INFORMADO pega o valor do campo dias, caso contrario o valor do input radio selecionado ##### */
        if($('input[type="radio"]:checked').val()=="INFORMADO"){
           var DiasAdd = $("#dias").val();
        }else{
           var DiasAdd = $('input[type="radio"]:checked').val();
        }
       /*############################################################## */

 // Aqui vem quantos dias você quer adicionar a data
        var d = new Date();
            // Aqui eu "mudo" a configuração de datas.
            // Crio um obj Date e pego o campo txtData e 
            // "recorto" ela com o split("/") e depois dou um
            // reverse() para deixar ela em padrão americanos YYYY/MM/DD
            // e logo em seguida eu coloco as barras "/" com o join("/")
            // depois, em milisegundos, eu multiplico um dia (86400000 milisegundos)
            // pelo número de dias que quero somar a txtData.
         d.setTime(Date.parse(txtData.split("/").reverse().join("/"))+(86400000*(DiasAdd)))
        
        // Crio a var da DataFinal            
        var DataFinal;

        // Aqui comparo o dia no objeto d.getDate() e vejo se é menor que dia 10.            
        if(d.getDate() < 10)
        {
            // Se o dia for menor que 10 eu coloca o zero no inicio
            // e depois transformo em string com o toString()
            // para o zero ser reconhecido como uma string e não
            // como um número.
            DataFinal = "0"+d.getDate().toString();
        }
        else
        {    
            // Aqui a mesma coisa, porém se a data for maior do que 10
            // não tenho necessidade de colocar um zero na frente.
            DataFinal = d.getDate().toString();    
        }
        
        // Aqui, já com a soma do mês, vejo se é menor do que 10
        // se for coloco o zero ou não.
        if((d.getMonth()+1) < 10){
            DataFinal += "/0"+(d.getMonth()+1).toString()+"/"+d.getFullYear().toString();
        }
        else
        {
            DataFinal += "/"+((d.getMonth()+1).toString())+"/"+d.getFullYear().toString();
        }
        console.log(DataFinal)

    });
});




       
function adicionarDiasData(dias){
  var hoje        = new Date();
  var dataVenc    = new Date(hoje.getTime() + (dias * 24 * 60 * 60 * 1000));
  return dataVenc.getDate() + "/" + (dataVenc.getMonth() + 1) + "/" + dataVenc.getFullYear();
}
 
var novaData = adicionarDiasData(5);
console.log(novaData);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
     <div class="form-group col-md-2">
          <label class="control-label" for="data_vencimento">Data</label>
          <input type="text" class="form-control datepicker required show-pwd" name="data_vencimento" id="data_vencimento">
     </div>

     <div class="form-group col-md-2">
          <label class="control-label" for="data_prorrogacao">Data Prorrogacao</label>
          <input type="text" class="form-control datepicker show-pwd" name="data_prorrogacao" id="data_prorrogacao">
     </div>
</div>

<div class="row">
     <div class="form-check form-check-radio form-check-inline">
          <label class="form-check-label" >Tipo de Parcelamento:</label>
            <input class="form-check-input show-pwd" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="7"> Semanal
            <span class="circle">
                    <span class="check"></span>
            </span>
          </label>
     </div>
     <div class="form-check form-check-radio form-check-inline">
          <label class="form-check-label">
                <input class="form-check-input show-pwd" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="15"> Quinzenal
                     <span class="circle">
                           <span class="check"></span>
                     </span>
          </label>
     </div>
          <div class="form-check form-check-radio form-check-inline">
               <label class="form-check-label">
                     <input class="form-check-input show-pwd" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="30"> Mensal
                            <span class="circle">
                                  <span class="check"></span>
                            </span>
               </label>
     </div>
     <div class="form-check form-check-radio form-check-inline">
          <label class="form-check-label">
               <input class="form-check-input show-pwd" type="radio" name="inlineRadioOptions" id="inlineRadio4" value="INFORMADO"> Informado
                   <span class="circle">
                         <span class="check"></span>
                   </span>
          </label>                           
     </div>
     <div class="col-md-2">
          <div class="form-group has-label">
               <label class="bmd-label-floating" for="dias">Qtd. dias</label>
               <input class="numero form-control  show-pwd" type="text" name="dias" size="03" 
                      id="dias">
          </div>
     </div>
</div>
<button>Data Vencimento</button>

0

os erros sao o uso da mesma variavel no calculo dtVenc1 e a falta do getDate() sem o getDate() a sua variavel é apenas uma string e sua soma vai resultar em algo como Mon Nov 19 2018 18:02:09 GMT+0300 (GMT+03:00)7 um 7 no final do texto.

Se vc usar:

dtVenc1.setDate(dtVenc.getDate() + 7);

vc vai ter esse valor: Mon Nov 19 2018 18:02:09 GMT+0300 (GMT+03:00)

caso use

dtVenc1 = dtVenc1.setDate(dtVenc.getDate() + 7);

vc vai ter esse valor: 1542639729006

3
  • Mas o getDate() não me trás a data atual? Eu gostaria de que o usuário informasse uma data e o Jquery pegasse essa data e somasse, por exemplo, 7 dias a ela, exemplo:
    – Ivan
    Commented 25/11/2018 às 17:28
  • 25/11/2018 + 7 = 02/12/2018
    – Ivan
    Commented 25/11/2018 às 17:28
  • @Ivan a data atual é Date.now(), o getDate() é o valor que o usuario escolhe no caledario.
    – HudsonPH
    Commented 26/11/2018 às 18:39

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .