Estou com uma tela pronta. Mas há alguns ajustes que não estou conseguindo resolver.
Um deles é o calculo de valores com a máscara de Real. Sem ela, funciona perfeitamente. Com ela o resultado fica Nan (o campo "Valor" recebe o mesmo e calcula para "Provisão royalties franchising", "Provisão fundo propaganda" e "Provisão royalties franchising"). A data está somando, mas com resultados malucos (a "Data da emissão" calcula para "1º vencimento", "2º vencimento" e "3º vencimento").
Estou mexendo o dia todo nisso e tentei adicionar o links dos scripts, mas não consegui.
Essa é a máscara para o Real (* maskMoney plugin for jQuery * http://plentz.github.com/jquery-maskmoney/) e esta é a mascara para data (jQuery Mask Plugin v1.14.10 // github.com/igorescobar/jQuery-Mask-Plugin).
Segue o que consegui fazer até o momento.
$(document).ready(function() {
/****** Função percentual ******/
function funcao_percentual(valor_1, destino, percentual) {
$(valor_1).on("click", function() {
$(destino).val('');
});
function arredondar(valor, casas) {
var novo = Math.round(valor * Math.pow(10, casas)) / Math.pow(10, casas);
return (novo);
}
$(valor_1).blur(function() {
valor = $(this).val();
porcentagem = percentual; // PORCENTAGEM A SER ADICIONADA
total = (parseFloat((valor * porcentagem) / 100));
$(destino).val(arredondar(total, 2));
});
}
/****** Função subtrair ******/
function funcao_subtrair(valor_1, valor_2, inicio, destino) {
$(inicio).on("click", function() {
$(destino).val('');
});
function arredondar(valor, casas) {
var novo = Math.round(valor * Math.pow(10, casas)) / Math.pow(10, casas);
return (novo);
}
$(inicio).blur(function() {
valor_1_v = $(valor_1).val();
valor_2_v = $(valor_2).val();
total = (parseFloat((valor_1_v - valor_2_v)));
$(destino).val(arredondar(total, 2));
});
}
/****** Função calcular a data ******/
function funcao_calcular_data(data_inicial, data_final, dias) {
$(data_inicial).blur(function() {
$(data_inicial).on("click", function() {
$(data_final).val('');
});
var data_ini = $(data_inicial).val();
var date = new Date(data_ini);
date.setDate(date.getDate() + dias);
var futDate = date.getDate() + "/" + date.getMonth() + "/" + date.getFullYear();
$(data_final).val(futDate);
});
}
/****** Percentual de Provisão - Royalties (franchising) ******/
funcao_percentual("#valor", "#provisao_royalties_franchising", 39.85)
/****** Percentual de Provisão Fundo Propaganda ******/
funcao_percentual("#valor", "#provisao_fundo_propaganda", 3)
/****** Subtração de Provisão - Royalties ( franchising) ******/
funcao_subtrair("#provisao_royalties_franchising", "#provisao_fundo_propaganda", "#valor", "#provisao_royalties_franchising_2")
/****** 1º vencimento ******/
funcao_calcular_data("#data_emissao", "#1_venc", 28)
/****** 2º vencimento ******/
funcao_calcular_data("#data_emissao", "#2_venc", 42)
/****** 3º vencimento ******/
funcao_calcular_data("#data_emissao", "#3_venc", 56)
});
$(document).ready(function() {
$('#data_emissao').mask('00/00/0000');
$('#vencimento').mask('00/00/0000');
$('#1_venc').mask('00/00/0000');
$('#2_venc').mask('00/00/0000');
$('#3_venc').mask('00/00/0000');
$('#data_emissao_2').mask('00/00/0000');
$('#vencimento_2').mask('00/00/0000');
$('#data_emissao_3').mask('00/00/0000');
$('#vencimento_3').mask('00/00/0000');
});
$(function() {
$(".valor").maskMoney({
symbol: 'R$ ',
showSymbol: true,
thousands: '.',
decimal: ',',
symbolStay: true
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label class="control-label">Data da emissão</label>
<div class="input-group date date-picker" data-date="">
<div class="input-group date">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
<input type="text" class="form-control" name="data_emissao" id="data_emissao">
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="control-label">Tipo</label>
<input type="text" placeholder="Tipo" name="tipo" id="tipo" value="" class="form-control" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="control-label">Nº nota fiscal</label>
<input type="text" placeholder="Nº nota fiscal" name="num_nf" id="num_nf" value="" class="form-control" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Razão social</label>
<input type="text" placeholder="Razão social" name="razao_social" id="razao_social" value="" class="form-control" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="control-label">Valor</label>
<input type="text" placeholder="Valor" name="valor" id="valor" value="" class="form-control valor" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="control-label">Vencimento</label>
<div class="input-group date date-picker" data-date="">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
<input type="text" class="form-control" name="vencimento" id="vencimento">
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="control-label">Forma de pagamento</label>
<input type="text" placeholder="Forma de pagamento" name="forma_pgto" id="forma_pgto" value="" class="form-control" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Descrição</label>
<input type="text" placeholder="Descrição" name="descricao" id="descricao" value="" class="form-control" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="control-label">1º vencimento</label>
<div class="input-group date">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
<input type="text" class="form-control" name="1_venc" id="1_venc" readonly>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="control-label">2º vencimento</label>
<div class="input-group date">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
<input type="text" class="form-control" name="2_venc" id="2_venc" readonly>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="control-label">3º vencimento</label>
<div class="input-group date">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
<input type="text" class="form-control" name="3_venc" id="3_venc" readonly>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label">Data da emissao</label>
<div class="input-group date date-picker" data-date="">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
<input type="text" class="form-control" name="data_emissao_2" id="data_emissao_2">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label">Provisão royalties franchising</label>
<input type="text" placeholder="Provisão royalties franchising" name="provisao_royalties_franchising" id="provisao_royalties_franchising" value="" class="form-control valor" readonly />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label">Provisão fundo propaganda</label>
<input type="text" placeholder="Provisão fundo propaganda" name="provisao_fundo_propaganda" id="provisao_fundo_propaganda" value="" class="form-control valor" readonly />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label">Nº documento</label>
<input type="text" placeholder="Nº documento" name="num_doc" id="num_doc" value="" class="form-control" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label">Valor</label>
<input type="text" placeholder="Valor" name="valor_2" id="valor_2" value="" class="form-control valor" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label">Vencimento</label>
<div class="input-group date date-picker" data-date="">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
<input type="text" class="form-control" name="vencimento_2" id="vencimento_2">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label">Provisão royalties franchising</label>
<input type="text" placeholder="Provisão royalties franchising" name="provisao_royalties_franchising_2" id="provisao_royalties_franchising_2" value="" class="form-control valor" readonly />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label">Nº nota fiscal</label>
<input type="text" placeholder="Nº nota fiscal" name="num_nf_2" id="num_nf_2" value="" class="form-control" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Data de emissão</label>
<div class="input-group date date-picker" data-date="">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
<input type="text" class="form-control" name="data_emissao_3" id="data_emissao_3">
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Valor</label>
<input type="text" placeholder="Valor" name="valor_3" id="valor_3" value="" class="form-control valor" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Vencimento</label>
<div class="input-group date date-picker" data-date="">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
<input type="text" class="form-control" name="vencimento_3" id="vencimento_3">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Xml</label>
<input type="text" placeholder="Xml" name="xml" id="xml" value="" class="form-control" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Visto arquivo</label>
<input type="text" placeholder="Visto arquivo" name="visto_arquivo" id="visto_arquivo" value="" class="form-control" />
</div>
</div>
</div>