Stack Overflow em Português Asked by Evandro César on November 30, 2020
Olá a todos os GODS OF SCRIPTS, estou com dificuldades em extrair o total de meses entre duas datas ex: datafinal(29/03/2018) – datainicial(29/01/2018) = 2 meses, entretanto as datas são fornecidas pelo datepiker jquery e se poderia informar o comando para alterar o valor do resultado quando alterado uma ou ambas as datas em javascript. Grato desde já;
segue o código abaixo:
<div class="control-form">
<label for="">Data Inicial:</label>
<input name="datainicial" type="text" id="calendario" value="29/01/2018" class="form-control" >
</div>
<div class="control-form">
<label for="">Data Final:</label>
<input name="datafinal" type="text" id="calendario2" class="form-control" >
</div>
<div class="control-form">
<label for="">Numero de Parcelas:</label>
<input name="numeroparcelas" type="text" class="form-control" id="numeroparcelas">
</div>
O Datepicker jQuery possui um evento onSelect:
quando uma data é selecionada. Então você pode chamar uma função dentro desse evento e calcular:
$('input[id*="calendario"]').datepicker({
dateFormat: 'dd/mm/yy',
onSelect: function(){
var mesIni = $("#calendario").val().split("/");
var mesFim = $("#calendario2").val().split("/");
mesIni = new Date(mesIni.pop()+"-"+mesIni[1]+"-"+mesIni.shift());
mesFim = new Date(mesFim.pop()+"-"+mesFim[1]+"-"+mesFim.shift());
var meses = mesFim.getMonth() - mesIni.getMonth()
+ (12 * (mesFim.getFullYear() - mesIni.getFullYear()));
if(!isNaN(meses)) $("#numeroparcelas").val(meses);
}
});
Veja exemplo:
$('input[id*="calendario"]').datepicker({
dateFormat: 'dd/mm/yy',
onSelect: function(){
var mesIni = $("#calendario").val().split("/");
var mesFim = $("#calendario2").val().split("/");
mesIni = new Date(mesIni.pop()+"-"+mesIni[1]+"-"+mesIni.shift());
mesFim = new Date(mesFim.pop()+"-"+mesFim[1]+"-"+mesFim.shift());
var meses = mesFim.getMonth() - mesIni.getMonth()
+ (12 * (mesFim.getFullYear() - mesIni.getFullYear()));
if(!isNaN(meses)) $("#numeroparcelas").val(meses);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="control-form">
<label for="">Data Inicial:</label>
<input name="datainicial" type="text" id="calendario" value="29/01/2018" class="form-control" >
</div>
<div class="control-form">
<label for="">Data Final:</label>
<input name="datafinal" type="text" id="calendario2" class="form-control" >
</div>
<div class="control-form">
<label for="">Numero de Parcelas:</label>
<input name="numeroparcelas" type="text" class="form-control" id="numeroparcelas">
</div>
Answered by Sam on November 30, 2020
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP