Fórum como trabalhar com dois datepicker? #486671
24/07/2014
0
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
Curtir tópico
+ 0
Responder
Post mais votado
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
});Joel Rodrigues
Responder
Gostei + 1
Mais Posts
25/07/2014
Fabrício Damasceno
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.
Responder
Gostei + 0
26/07/2014
Fabrício Damasceno
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>
Responder
Gostei + 0
11/08/2014
Fabrício Damasceno
Obrigado.
Já consegui.
:(
Já consegui.
:(
Responder
Gostei + 0
27/08/2014
Joel Rodrigues
Desculpe a demora.
O que você fez para resolver?
O que você fez para resolver?
Responder
Gostei + 0
Clique aqui para fazer login e interagir na Comunidade :)