eonasdan - jquery bootstrap datepicker
Twitter Bootstrap Datepicker dentro de la ventana modal (19)
Actualmente estoy usando el marco Twitter Bootstrap, y cuando uso las ventanas modales no puedo superar los elementos js para que funcionen como datepicker o validación, aunque los elegidos y los uniformes rinden correctamente. por favor vea mi ventana modal a continuación:
<div class="modal hide in" id="newMember" style="display: block; " aria-hidden="false">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">×</button>
<h3>New Member Form</h3>
</div>
<form accept-charset="UTF-8" action="/players" class="form-horizontal" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="KdL6cc2Vb53qeMY+PpBUS70myT4HX1uWofMUBolLea8="></div>
<div class="modal-body">
<div class="widget-content nopadding">
<div class="control-group">
<label class="control-label" for="user_role">Role</label>
<div class="controls">
<select id="user_role" name="user[role]" style="display: none; " class="chzn-done"><option value="">Select member role</option>
<option value="1">Player</option>
<option value="2">Coach</option>
<option value="3">Parent</option>
<option value="4">Manager</option>
<option value="5">Non-player</option></select><div id="user_role_chzn" class="chzn-container chzn-container-single" style="width: 222px; "><a href="javascript:void(0)" class="chzn-single"><span>Select member role</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 220px; top: 0px; "><div class="chzn-search" style=""><input type="text" autocomplete="off" style="width: 212px; "></div><ul class="chzn-results"><li id="user_role_chzn_o_0" class="active-result result-selected" style="">Select member role</li><li id="user_role_chzn_o_1" class="active-result" style="">Player</li><li id="user_role_chzn_o_2" class="active-result" style="">Coach</li><li id="user_role_chzn_o_3" class="active-result" style="">Parent</li><li id="user_role_chzn_o_4" class="active-result" style="">Manager</li><li id="user_role_chzn_o_5" class="active-result" style="">Non-player</li></ul></div></div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_full_name">Full name</label>
<div class="controls">
<input id="user_first_name" name="user[first_name]" placeholder="First Name" size="30" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_last_name">Last name</label>
<div class="controls">
<input id="user_last_name" name="user[last_name]" placeholder="Last Name" size="30" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_email">Email</label>
<div class="controls">
<input id="user_email" name="user[email]" placeholder="Email Address" size="30" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_date_of_birth">Date of birth</label>
<div class="controls">
<input class="datepicker" data-date-format="dd/mm/yyyy" id="user_dob" name="user[dob]" placeholder="dd/mm/yyyy" readonly="readonly" size="30" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_gender">Gender</label>
<div class="controls">
<select id="user_gender" name="user[gender]" style="display: none; " class="chzn-done"><option value="">Select gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option></select><div id="user_gender_chzn" class="chzn-container chzn-container-single" style="width: 222px; "><a href="javascript:void(0)" class="chzn-single"><span>Select gender</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 220px; top: 0px; "><div class="chzn-search" style=""><input type="text" autocomplete="off" style="width: 212px; "></div><ul class="chzn-results"><li id="user_gender_chzn_o_0" class="active-result result-selected" style="">Select gender</li><li id="user_gender_chzn_o_1" class="active-result" style="">Male</li><li id="user_gender_chzn_o_2" class="active-result" style="">Female</li></ul></div></div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_team">Team</label>
<div class="controls">
<select id="user_team_id" name="user[team_id]" style="display: none; " class="chzn-done"><option value="">None</option>
<option value="4">Metro 3 East</option>
<option value="1">State League 3</option>
<option value="2">State League 4</option>
<option value="3">Metro 3 South</option>
<option value="5">Pennant E</option>
<option value="6">Under 9 White</option>
<option value="7">Under 9 Navy</option>
<option value="8">Under 13 Pennant South East</option>
<option value="9">Under 17 Pennant South East</option>
<option value="10">Under 15 South (1)</option>
<option value="11">Under 11 Pennant South East</option>
<option value="12">Under 11 South</option></select><div id="user_team_id_chzn" class="chzn-container chzn-container-single" style="width: 222px; "><a href="javascript:void(0)" class="chzn-single"><span>None</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 220px; top: 0px; "><div class="chzn-search" style=""><input type="text" autocomplete="off" style="width: 212px; "></div><ul class="chzn-results"><li id="user_team_id_chzn_o_0" class="active-result result-selected" style="">None</li><li id="user_team_id_chzn_o_1" class="active-result" style="">Metro 3 East</li><li id="user_team_id_chzn_o_2" class="active-result" style="">State League 3</li><li id="user_team_id_chzn_o_3" class="active-result" style="">State League 4</li><li id="user_team_id_chzn_o_4" class="active-result" style="">Metro 3 South</li><li id="user_team_id_chzn_o_5" class="active-result" style="">Pennant E</li><li id="user_team_id_chzn_o_6" class="active-result" style="">Under 9 White</li><li id="user_team_id_chzn_o_7" class="active-result" style="">Under 9 Navy</li><li id="user_team_id_chzn_o_8" class="active-result" style="">Under 13 Pennant South East</li><li id="user_team_id_chzn_o_9" class="active-result" style="">Under 17 Pennant South East</li><li id="user_team_id_chzn_o_10" class="active-result" style="">Under 15 South (1)</li><li id="user_team_id_chzn_o_11" class="active-result" style="">Under 11 Pennant South East</li><li id="user_team_id_chzn_o_12" class="active-result" style="">Under 11 South</li></ul></div></div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_mobile">Mobile</label>
<div class="controls">
<input id="user_mobile" maxlength="10" name="user[mobile]" placeholder="i.e 0421813529" size="10" type="tel">
<span class="help-block">
<input name="user[private_mobile]" type="hidden" value="0"><div class="checker" id="uniform-user_private_mobile"><span><div class="checker" id="uniform-user_private_mobile"><span><input id="user_private_mobile" name="user[private_mobile]" type="checkbox" value="1" style="opacity: 0; "></span></div></span></div>
<a href="javascript:void(0)" class="tip-bottom" data-original-title="Normally, all members of the team can see this information. If you don''t want teammates to see this information, just click this checkbox. (Note: Team managers will always see this information.)">Private</a>
</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_manager_access">Manager access</label>
<div class="controls">
<input name="user[manager]" type="hidden" value="0"><div class="checker" id="uniform-user_manager"><span><div class="checker" id="uniform-user_manager"><span><input id="user_manager" name="user[manager]" type="checkbox" value="1" style="opacity: 0; "></span></div></span></div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_admin_access">Admin access</label>
<div class="controls">
<input name="user[admin]" type="hidden" value="0"><div class="checker" id="uniform-user_admin"><span><div class="checker" id="uniform-user_admin"><span><input id="user_admin" name="user[admin]" type="checkbox" value="1" style="opacity: 0; "></span></div></span></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="pull-right">
<input class="btn btn-primary" name="commit" type="submit" value="Create User">
<a class="btn btn-danger" data-dismiss="modal" href="#">Cancel</a>
</div>
</div>
</form>
</div>
Agregar z-indez en la clase ui-datepicker
<style>
.ui-datepicker{ z-index:1151 !important; }
</style>
Como mccannf dijo en su comentario :
Te recomiendo que mires tu bootstrap CSS y JS. Su modal se establece en un valor de índice Z muy alto (99999). Simplemente compare mi jsfiddle de arriba con los suyos
Creo que es mejor cambiar la función lógica en el complemento. Alrededor de la fila 552 cambio esto:
var zIndex = parseInt(this.element.parents().filter(function(){
return $(this).css(''z-index'') !== ''auto'';
}).first().css(''z-index''))+10;
dentro de esto:
var zIndex = parseInt(this.element.parents().filter(function(){
return $(this).css(''z-index'') !== ''auto'';
}).first().css(''z-index'')) + 10 * 1000; //think is enought
De acuerdo con http://www.daterangepicker.com/ (opciones)
$(''#dispatch_modal'').on(''shown.bs.modal'', function() {
$(''input:text:visible:first'').focus();
// prepare datepicker
$(''.form_datepicker'').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
parentEl: ''#dispatch_modal''
});
});
`
parentEl resolvió mi problema ...
Deja que te ayude,
puedes actualizar tu bootstrap.min.css
en el menú desplegable de clase puede cambiar el valor del índice z en 2000
entonces aparece el selector de fecha
Fwiw. Necro pero aún
para <link href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css" rel="stylesheet">
lo necesitaba
<style type="text/css">
.ui-timepicker-container {z-index: 1151 !important;}
</style>
en la CABEZA del documento para que acepte la anulación
Intenté la mayoría de las otras soluciones aquí antes de recurrir a eso.
Intente cambiar el valor del índice .modal para .modal y .modal-backdrop menos que .datepicker z-index value.
Para BootsTrap Calender usa esto
/ The Calender Index CSS /
.bootstrap-datetimepicker-widget {
z-index:99999 !important;
}
Para Bootstrap 3.x y Ace Template wrapbootstrap
Datepicker y Timepicker dentro de un Modal
<style>
body.modal-open .datepicker {
z-index: 1050 !important;
}
body.modal-open .bootstrap-timepicker-widget {
z-index: 1050 !important;
}
</style>
Prueba con esta pieza de código.
.ui-datepicker{ z-index:1151 !important; }
resolverá el problema cuando estés usando bootstrap V3
Tuve este error porque me desplacé hacia abajo. Datepicker tenía la posición superior incorrecta en fijo. Solo lo uso ahora como:
$(''#myModal'').on(''show.bs.modal'', function (e) {
$(document).scrollTop(0);
});
y está funcionando bien ahora.
Yo suelo:
body.modal-open .datepicker {
z-index: 1200 !important;
}
De esta forma: si el modal no está abierto, y quiere que el datepicker esté en el índice z normal (en mi caso, lo necesitaba en el menú desplegable del menú, que tiene un índice Z de 1000), funciona.
Si el modal está abierto, el datepicker necesita estar sobre el índice z modal (1040 o 1050), entonces use el selector body.modal-open .
Estoy usando Bootstrap 3.1.1
agregue el índice Z por encima de 1051 en la clase datepicker
agregue algo como esto en la página o css
<style>
.datepicker{z-index:1151 !important;}
</style>
intenta usar este código, funciona para mí. por cierto vino de este sitio https://github.com/eternicode/bootstrap-datepicker/issues/464 .
$(''#datepicker'').datepicker().on(''show'', function () {
var modal = $(''#datepicker'').closest(''.modal'');
var datePicker = $(''body'').find(''.datepicker'');
if (!modal.length) {
$(datePicker).css(''z-index'', ''auto'');
return;
}
var zIndexModal = $(modal).css(''z-index'');
$(datePicker).css(''z-index'', zIndexModal + 1);
});
para mí solo funcionó con! important en css
.datepicker {z-index: 1151 !important;}
prueba esto
#ui-datepicker-div {
z-index: 100000;
}
puedes cambiar en tu archivo css bootstrap-timepicker/css/bootstrap-timepicker.css
de
.bootstrap-timepicker-widget.dropdown-menu.open {
display: inline-block;
}
a
.bootstrap-timepicker-widget.dropdown-menu.open {
display: inline-block;
z-index:1151;
}
si usa bootstrap V3 intente esto.
.bootstrap-datetimepicker-widget
{
z-index: 1200 !important;
}
$(''#effective_to'').datepicker({
dateFormat: "dd-mm-yyyy",
changeMonth: true,
changeYear: true,
beforeShow: function() {
$(''#ui-datepicker-div'').addClass(''datepicker'');
}
});
CSS
.datepicker {
z-index: 100000 !important;
display: block;
}
Esto funciona de mi. Aunque llamé a la modelo a través de ajax