como trabalhar com dois datepicker?
Olá pessoal.
Eu tenho um form em uma pagina php e essa página contém dois datepicker.
A consulta é do tipo Data Inicial e Data final e ela está funcionando perfeitamente.
O problema é quando eu clico no campo do datepicker, ele só fecha quando eu clico fora.
Alguém possui alguma ideia de como resolver isso?
Obrigado.
Eu tenho um form em uma pagina php e essa página contém dois datepicker.
A consulta é do tipo Data Inicial e Data final e ela está funcionando perfeitamente.
O problema é quando eu clico no campo do datepicker, ele só fecha quando eu clico fora.
Alguém possui alguma ideia de como resolver isso?
Obrigado.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
$(function() {
$("#DataInicial").datepicker({
// changeMonth: true,
// changeYear: true,
numberOfMonths: 1,
//showButtonPanel: true,
maxDate: "0D",
dateFormat: "yy'/'mm'/'dd",
showAnim: "clip",
firstDay: 0,
// showOn: "button", // se tirar isto mostra on focus
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
yearRange: '2000:2020',
monthNames: ["Janeiro", "Feveveiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
monthNamesShort: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
//dayNames: ["Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sábado"],
dayNamesMin: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"],
onSelect: function() {
$(this).click();
}
});
})
$(function() {
$("#DataFinal").datepicker({
// changeMonth: true,
// changeYear: true,
numberOfMonths: 1,
//showButtonPanel: true,
maxDate: "0D",
dateFormat: "yy'/'mm'/'dd",
showAnim: "clip",
firstDay: 0,
// showOn: "button", // se tirar isto mostra on focus
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
yearRange: '2000:2020',
monthNames: ["Janeiro", "Feveveiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
monthNamesShort: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
//dayNames: ["Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sábado"],
dayNamesMin: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"],
onSelect: function() {
$(this).click();
}
});
})
</script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="well">
<h2 class="centraliza_texto">Selecione o Período que deseja obter o Relatório:</h2>
<form action="relatorio.php" method="POST">
<div class="centraliza">
<fieldset>Início
<input id="DataInicial" name="DataInicial" type="text" name="data_inicial" class="input-medium" required="required" />
Fim:
<input id="DataFinal" name="DataFinal" type="text" name="data_final" class="input-medium" required="required"/>
<br />
<br />
<button type="submit" class="btn btn-primary pull-right">Consultar</button>
</fieldset>
</div>
</form>
</div>
</div>
</div>
<script src="../mpv/js/bootstrap.min.js"></script>
</body>
</html>
Fabrício Damasceno
Curtidas 0
Melhor post
Joel Rodrigues
25/07/2014
Tente colocar as duas chamadas à função DatePicker dentro da mesma função de carregamento da jQuery:
$(function() {
//faça tudo aqui
});GOSTEI 1
Mais Respostas
Fabrício Damasceno
24/07/2014
Fiz isso, mas não funcionou.
Eu clico no campo para preencher a data e está abrindo o datepicker, mas só fecha quando eu clico fora.
Obrigado.
Eu clico no campo para preencher a data e está abrindo o datepicker, mas só fecha quando eu clico fora.
Obrigado.
GOSTEI 0
Fabrício Damasceno
24/07/2014
O código ficou assim, Joel.
<script>
$(function() {
$("#DataInicial").datepicker({
numberOfMonths: 1,
maxDate: "0D",
dateFormat: "yy'/'mm'/'dd",
showAnim: "clip",
firstDay: 0,
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
yearRange: '2000:2020',
monthNames: ["Janeiro", "Feveveiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
monthNamesShort: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
//dayNames: ["Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sábado"],
dayNamesMin: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"],
onSelect: function() {
$(this).click();
}
});
// Data Final
$("#DataFinal").datepicker({
numberOfMonths: 1,
maxDate: "0D",
dateFormat: "yy'/'mm'/'dd",
showAnim: "clip",
firstDay: 0,
// showOn: "button", // se tirar isto mostra on focus
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
yearRange: '2000:2020',
monthNames: ["Janeiro", "Feveveiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
monthNamesShort: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
//dayNames: ["Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sábado"],
dayNamesMin: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"],
onSelect: function() {
$(this).click();
}
});
})
</script>
GOSTEI 0
Fabrício Damasceno
24/07/2014
Obrigado.
Já consegui.
:(
Já consegui.
:(
GOSTEI 0
Joel Rodrigues
24/07/2014
Desculpe a demora.
O que você fez para resolver?
O que você fez para resolver?
GOSTEI 0