Datepicker dentro da janela modal


(Gelson) #1

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>
Bootstrap Example
<!-- 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','Sex','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','Sex','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" );
	  } );

Large Modal

Open Large Modal
×

Modal Header

This is a large modal.

	   <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>

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


(Luan Maik) #2

Procure sobre a propriedade z-index no CSS, que encontrará a resposta. Ela é responsável sobre a posição das layers.