I have 2 date fields and I will use those dates in a select and I would like a "browse" button to appear only when the two fields are filled in, it follows the current code:
<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>
* CalendarIni and EndPort are a datepicker.
** button that you would like to appear only after the calendars have been filled
What changes should occur so that the button only appears with the dates filled?