Olá,
Estou tentando manipular datas com Jquery e iniciei o , indo aos poucosjQuery.
A ideia é a seguinte:
Quando oO usuário informarinforma a Data_vencimentoData_vencimento
e o tipo (no radio buttonradio button
), se o vencimento será semanal, quinzenal, mensal ou informado.
No inputinput
informado, o usuário vai digitar
a a quantidade de dias (por exemplo, 20 dias) para que o JqueryjQuery possa calcular os vencimentos.
Então em um exemplo prático, seria assimExemplo:
- O usuário informa a data de vencimento: 14/11/2018;
- Usuário seleciona o vencimento semanal;
- o JqueryO jQuery calcula e preenche o value do input '#dt_venc1"
input #dt_venc1
com a data 21/11/2018. (14 + 7).
Só que o alert(dtVenc1)alert(dtVenc1)
retorna um NaN. :(NaN
.
Como se manipula datas com JqueryjQuery? Parece que manipular com datas com o PHP é bem mais fácil. Mas com o JqueryjQuery, seria independente de linguagem utilizada...
<script>
$(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);
});
});
" Data Vencimento *
$(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>
<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>
Tipo de Parcelamento:SemanalQuinzenalMensalInformadoQtd. dias"