Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Gelson Ventura

Datepicker dentro da janela modal

Recommended Posts

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>

 

02.jpg

 

Até consigo fazer aparecer, mas não grava mais na caixa de texto e parece que fica no fundo

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por 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?
    • Por 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?? 




    • Por 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;  
    • Por 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
       

    • Por MARCOS VINICIUS LOPES
      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" >
      }
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.