Jump to content
MARCOS VINICIUS LOPES

Calendario com datepicker em mais de um campo.

Recommended Posts

Boa noite galera, alguém me tira do prego, estou precisando colocar em mais de um campo input um calendário do tipo datepicker, abaixo script que uso para o calendário, o problema e que para usar em mais de um campo funciona apenas no primeiro campo o resto não funciona, observação os campos são criados de acordo com uma pesquisa do banco, então pode ser uma,duas,três, etc...  criado por um laço while. então preciso que todos os campos chame o calendário sem problemas.

<script>
$(function() {
    $("#calendario").datepicker({
        dateFormat: 'dd-mm-yy',
        dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
        dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
        dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','---','Sáb','Dom'],
        monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
        monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez']
    });
});

</script>

while ($i < 5( por exmplo ) {

<input name="de"  type="text" size="15" id="calendario" >

}

Share this post


Link to post
Share on other sites

já tentou usar classe no lugar de id? com a classe deva funfar em todos que tiver a tal

 

$(".calendario").datepicker({

Share this post


Link to post
Share on other sites

@marsolim

Realizei a mudança mais não deu certo o esta faltando algo que não vejo.:sweat_smile:

$(function() {
    $(".calendario").datepicker({
        dateFormat: 'dd-mm-yy',
        dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
        dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
        dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','---','Sáb','Dom'],
        monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
        monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez']
    });
});

</script>

while ($i < 5( por exmplo ) {

<input name="de"  type="text" size="15" id="calendario" >

}

Share this post


Link to post
Share on other sites
15 minutos atrás, MARCOS VINICIUS LOPES disse:

@marsolim

Realizei a mudança mais não deu certo o esta faltando algo que não vejo.:sweat_smile:

$(function() {
    $(".calendario").datepicker({
        dateFormat: 'dd-mm-yy',
        dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
        dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
        dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','---','Sáb','Dom'],
        monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
        monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez']
    });
});

</script>

while ($i < 5( por exmplo ) {

<input name="de"  type="text" size="15" id="calendario" >

}

Achei o erro meu caro, valeu pela dica , estava errando na chamado do JS. srsr faz parte valeu. @marsolim

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By ghlevin
      No site de um cliente, estou usando o Datepicker do Bootstrap (peguei nesse site - eyecon.ro/bootstrap-datepicker ). Contudo, em algumas páginas, eu configuro o datepicker pra mês e ano. Selecionados os dois, mudam os dados de uma tabela:
      $(".datepicker").datepicker( { format: "mm/yyyy", autoclose: true, viewMode: "months", minViewMode: "years", }).on('changeDate', function(ev){ montaTabela(); // $(this).datepicker('hide'); }); Tudo funciona, mas ele não fecha o datepicker depois da seleção do mês e do ano. O autoClose não funciona e nem colocando hide ou close pro datepicker dá certo. Curiosamente, o hide (que está comentado acima) funciona pra páginas que usam datepicker de data completa (dd/mm/yyyy). O que posso tentar pra resolver?
    • By PeeWee
      Estou tendo problemas com o envio do valor de uma variavel javascript para outra pagina, obs: manjo muito pouco de javascript.
      No primeiro script um datapicker permite o usuario selecionar o dia, o ID do usuário nesse momento ja está armazenado em uma variavel PHP, pois veio de uma seleção anterior. Os dois scripts devem enviar as respectivas informações (dia e ID) para a função.js através do onclick. 
      No onclick está dessa forma:
      var dados = "id_cate="+document.getElementById('client').value;
          dados = dados+"&nome="+document.getElementById('datepicker').value;
      porém o valor do ID do cliente nao está chegando até aqui, exibindo undefined na url. 
      O que estária errado?? 




    • By Rafael Motta
      Bom dia a todos, estou tendo um problema em relação a pegar a variavel do javascript usando o plugin datepicker e passar pro php, pois quando faço o echo no php ele me retorna uma string muito grande pq está imprimindo todo o echo e nao apenas a variavel... alguem sabe uma forma de pegar apenas a variavel sem usar post, get... seguem os codigos abaixo
      $(function() { $("#datepicker").datepicker({ onSelect: function(dateText, inst) { $("#data").text(dataText); } }); }); $teste = "<input type=\"text\" id=\"datepicker\" name=\"datepicker\"/>"; echo $teste;  
    • By Gelson Ventura
      Boa tarde, gostaria de saber como faço para usar um datepicker dentro da janela modal. (html, javascript e bootstrap)
       
      Eis meu código
       
      <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <!-- Link Calendário --> <link href="jquery-ui-1.12.1.custom/jquery-ui.css" rel="stylesheet" /> <!-- Scripts Jquery --> <script src="js/jquery-2.0.2.min.js"></script> <!-- Scripts Jquery UI --> <script src="jquery-ui-1.12.1.custom/jquery-ui.js"></script> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap.min.js"></script> <script> $(function() { $("#datepicker").datepicker({ dateFormat: 'dd/mm/yy', dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'], dayNamesMin: ['D','S','T','Q','Q','S','S','D'], dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','---','Sáb','Dom'], monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'], monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'], minDate: -5, maxDate: "+1D" }); }); $( function() { $( "#datepicker2" ).datepicker({ dateFormat: 'dd/mm/yy', dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'], dayNamesMin: ['D','S','T','Q','Q','S','S','D'], dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','---','Sáb','Dom'], monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'], monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'], maxDate: "+3D" }); } ); $( function() { $( "#datepicker3" ).datepicker(); $( "#datepicker3").datepicker( "option", "showAnim", "clip" ); } ); $( function() { $( "#datepicker4" ).datepicker(); $( "#datepicker4").datepicker( "option", "showAnim", "slideDown" ); } ); $( function() { $( "#datepicker5" ).datepicker(); $( "#datepicker5").datepicker( "option", "showAnim", "fadeIn" ); } ); $( function() { $( "#datepicker6" ).datepicker(); $( "#datepicker6").datepicker( "option", "showAnim", "blind" ); } ); $( function() { $( "#datepicker7" ).datepicker(); $( "#datepicker7").datepicker( "option", "showAnim", "bounce" ); } ); $( function() { $( "#datepicker8" ).datepicker(); $( "#datepicker8").datepicker( "option", "showAnim", "drop" ); } ); $( function() { $( "#datepicker10" ).datepicker(); $( "#datepicker10").datepicker( "option", "showAnim", "slide" ); } ); </script> </head> <body> <div class="container"> <h2>Large Modal</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Large Modal</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>This is a large modal.</p> <br/> <div class="rows"> <div class= "col-sm-3 col-md-3 col-lg-3"> <div class="form-group"> Máximo e mínimo de dias <div class="input-group date"> <input id="datepicker" type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class= "col-sm-3 col-md-3 col-lg-3"> <div class="form-group"> Máximo dias <div class="input-group date"> <input id="datepicker2" type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class= "col-sm-3 col-md-3 col-lg-3"> <div class="form-group"> Efeito de abertura Clip <div class="input-group date"> <input id="datepicker3" type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class= "col-sm-3 col-md-3 col-lg-3"> <div class="form-group"> Efeito de abertura Slide down <div class="input-group date"> <input id="datepicker4" type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> <div class="rows"> <div class= "col-sm-3 col-md-3 col-lg-3"> <div class="form-group"> Efeito de abertura Fade in <div class="input-group date"> <input id="datepicker5" type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class= "col-sm-3 col-md-3 col-lg-3"> <div class="form-group"> Efeito de abertura Blind (UI Effect) <div class="input-group date"> <input id="datepicker6" type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class= "col-sm-3 col-md-3 col-lg-3"> <div class="form-group"> Efeito de abertura Bounce (UI Effect) <div class="input-group date"> <input id="datepicker7" type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class= "col-sm-3 col-md-3 col-lg-3"> <div class="form-group"> Efeito de abertura Drop (UI Effect) <div class="input-group date"> <input id="datepicker8" type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> <div class="rows"> <div class= "col-sm-3 col-md-3 col-lg-3"> <div class="form-group"> Efeito de abertura Slide <div class="input-group date"> <input id="datepicker10" type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html>  

       
      Até consigo fazer aparecer, mas não grava mais na caixa de texto e parece que fica no fundo
       
       
    • By Alysson Abech
      Gostaria de saber como posso listar os eventos setados no datepicker, que quando ao passar o mouse em cima dos mesmos , eles mudassem o hover ou algo assim diretamente no calendário.
       
      Código atual:
      codepen.io/abech/pen/VrWOLR
       
      Imagem de exemplo do código atual
       

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.