Datepicker dentro da janela modal
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">×</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 fundoDiscussão (0)
Carregando comentários...