Tenho 2 campos de datas e irei usar essas datas em um select e gostaria que um botão "consultar" aparecesse somente quando os dois campos fossem preenchidos, segue o código atual:
<form method="post" action="">
Início do período:
<input type="text" id="calendarioIni" name="dataInicio">*
Fim do período:
<input type="text" id="calendarioFim" name="dataFim">*
<input type="submit" value="Consultar"/>**
<br><br><br>
<?php if(isset($_POST['dataInicio']) && isset($_POST['dataFim']))
{
$dataIni = $_POST['dataInicio'];
$dataFim = $_POST['dataFim'];
echo $dataIni."<br>";//Teste para verificar o valor nas variáveis que recebem a data via POST
echo $dataFim;
}
?>
</form>
<script>
window.onload = function(){
var dataIni = document.querySelector("#calendarioIni");
var dataFim = document.querySelector("#calendarioFim");
dataIni.addEventListener('input', checaVazio );
dataFim.addEventListener('input', checaVazio );
function checaVazio(){
var botao = document.querySelector("form input[type='submit']");
botao.style.display = dataIni.value && dataFim.value ? "inline" : "none";
}
};
var start = new Date(1997, 12, 01);
var end = new Date(1998, 11, 31) ;
var view = new Date(1997, 12, 01);
$(document).ready(function() {
$('#calendarioIni').datepicker({
endDate: end,
startDate: start,
startView: view
});
});
$(document).ready(function() {
$('#calendarioFim').datepicker({
endDate: end,
startDate: start,
startView: view
});
});
</script>
*calendarioIni e calendarioFim são um datepicker.
**botão que gostaria que aparecesse somente após o preenchimento dos calendarios
Quais mudanças deveriam ocorrer para que o botão somente aparecesse com as datas preenchidas?