Twitter Bootstrap Datepicker within modal window

Question

I am currently using the Twitter Bootstrap framework  and when using the modal windows I cannot get over js elements to work like datepicker or validation  though chosen and uniform render correctly  please see my modal window below      lt div class  modal hide in  id  newMember  style  display  block    aria-hidden  false  gt           lt div class  modal-header  gt             lt button class  close  data-dismiss  modal  type  button  gt    lt  button gt             lt h3 gt New Member Form lt  h3 gt           lt  div gt           lt form accept-charset  UTF-8  action   players  class  form-horizontal  id  new user  method  post  gt  lt div style  margin 0 padding 0 display inline  gt  lt input name  utf8  type  hidden  value     gt  lt input name  authenticity token  type  hidden  value  KdL6cc2Vb53qeMY PpBUS70myT4HX1uWofMUBolLea8   gt  lt  div gt             lt div class  modal-body  gt               lt div class  widget-content nopadding  gt                 lt div class  control-group  gt                   lt label class  control-label  for  user role  gt Role lt  label gt                   lt div class  controls  gt                     lt select id  user role  name  user role   style  display  none    class  chzn-done  gt  lt option value    gt Select member role lt  option gt                     lt option value  1  gt Player lt  option gt                     lt option value  2  gt Coach lt  option gt                     lt option value  3  gt Parent lt  option gt                     lt option value  4  gt Manager lt  option gt                     lt option value  5  gt Non-player lt  option gt  lt  select gt  lt div id  user role chzn  class  chzn-container chzn-container-single  style  width  222px    gt  lt a href  javascript void 0   class  chzn-single  gt  lt span gt Select member role lt  span gt  lt div gt  lt b gt  lt  b gt  lt  div gt  lt  a gt  lt div class  chzn-drop  style  left  -9000px  width  220px  top  0px    gt  lt div class  chzn-search  style    gt  lt input type  text  autocomplete  off  style  width  212px    gt  lt  div gt  lt ul class  chzn-results  gt  lt li id  user role chzn o 0  class  active-result result-selected  style    gt Select member role lt  li gt  lt li id  user role chzn o 1  class  active-result  style    gt Player lt  li gt  lt li id  user role chzn o 2  class  active-result  style    gt Coach lt  li gt  lt li id  user role chzn o 3  class  active-result  style    gt Parent lt  li gt  lt li id  user role chzn o 4  class  active-result  style    gt Manager lt  li gt  lt li id  user role chzn o 5  class  active-result  style    gt Non-player lt  li gt  lt  ul gt  lt  div gt  lt  div gt                   lt  div gt                 lt  div gt                 lt div class  control-group  gt                   lt label class  control-label  for  user full name  gt Full name lt  label gt                   lt div class  controls  gt                     lt input id  user first name  name  user first name   placeholder  First Name  size  30  type  text  gt                   lt  div gt                 lt  div gt                 lt div class  control-group  gt                   lt label class  control-label  for  user last name  gt Last name lt  label gt                   lt div class  controls  gt                     lt input id  user last name  name  user last name   placeholder  Last Name  size  30  type  text  gt                   lt  div gt                 lt  div gt                 lt div class  control-group  gt                   lt label class  control-label  for  user email  gt Email lt  label gt                   lt div class  controls  gt                     lt input id  user email  name  user email   placeholder  Email Address  size  30  type  text  gt                   lt  div gt                 lt  div gt                 lt div class  control-group  gt                   lt label class  control-label  for  user date of birth  gt Date of birth lt  label gt                   lt div class  controls  gt                     lt 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  gt                   lt  div gt                 lt  div gt                 lt div class  control-group  gt                   lt label class  control-label  for  user gender  gt Gender lt  label gt                   lt div class  controls  gt                     lt select id  user gender  name  user gender   style  display  none    class  chzn-done  gt  lt option value    gt Select gender lt  option gt                     lt option value  Male  gt Male lt  option gt                     lt option value  Female  gt Female lt  option gt  lt  select gt  lt div id  user gender chzn  class  chzn-container chzn-container-single  style  width  222px    gt  lt a href  javascript void 0   class  chzn-single  gt  lt span gt Select gender lt  span gt  lt div gt  lt b gt  lt  b gt  lt  div gt  lt  a gt  lt div class  chzn-drop  style  left  -9000px  width  220px  top  0px    gt  lt div class  chzn-search  style    gt  lt input type  text  autocomplete  off  style  width  212px    gt  lt  div gt  lt ul class  chzn-results  gt  lt li id  user gender chzn o 0  class  active-result result-selected  style    gt Select gender lt  li gt  lt li id  user gender chzn o 1  class  active-result  style    gt Male lt  li gt  lt li id  user gender chzn o 2  class  active-result  style    gt Female lt  li gt  lt  ul gt  lt  div gt  lt  div gt                   lt  div gt                 lt  div gt                 lt div class  control-group  gt                   lt label class  control-label  for  user team  gt Team lt  label gt                   lt div class  controls  gt                     lt select id  user team id  name  user team id   style  display  none    class  chzn-done  gt  lt option value    gt None lt  option gt                     lt option value  4  gt Metro 3 East lt  option gt                     lt option value  1  gt State League 3 lt  option gt                     lt option value  2  gt State League 4 lt  option gt                     lt option value  3  gt Metro 3 South lt  option gt                     lt option value  5  gt Pennant E lt  option gt                     lt option value  6  gt Under 9 White lt  option gt                     lt option value  7  gt Under 9 Navy lt  option gt                     lt option value  8  gt Under 13 Pennant South East lt  option gt                     lt option value  9  gt Under 17 Pennant South East lt  option gt                     lt option value  10  gt Under 15 South  1  lt  option gt                     lt option value  11  gt Under 11 Pennant South East lt  option gt                     lt option value  12  gt Under 11 South lt  option gt  lt  select gt  lt div id  user team id chzn  class  chzn-container chzn-container-single  style  width  222px    gt  lt a href  javascript void 0   class  chzn-single  gt  lt span gt None lt  span gt  lt div gt  lt b gt  lt  b gt  lt  div gt  lt  a gt  lt div class  chzn-drop  style  left  -9000px  width  220px  top  0px    gt  lt div class  chzn-search  style    gt  lt input type  text  autocomplete  off  style  width  212px    gt  lt  div gt  lt ul class  chzn-results  gt  lt li id  user team id chzn o 0  class  active-result result-selected  style    gt None lt  li gt  lt li id  user team id chzn o 1  class  active-result  style    gt Metro 3 East lt  li gt  lt li id  user team id chzn o 2  class  active-result  style    gt State League 3 lt  li gt  lt li id  user team id chzn o 3  class  active-result  style    gt State League 4 lt  li gt  lt li id  user team id chzn o 4  class  active-result  style    gt Metro 3 South lt  li gt  lt li id  user team id chzn o 5  class  active-result  style    gt Pennant E lt  li gt  lt li id  user team id chzn o 6  class  active-result  style    gt Under 9 White lt  li gt  lt li id  user team id chzn o 7  class  active-result  style    gt Under 9 Navy lt  li gt  lt li id  user team id chzn o 8  class  active-result  style    gt Under 13 Pennant South East lt  li gt  lt li id  user team id chzn o 9  class  active-result  style    gt Under 17 Pennant South East lt  li gt  lt li id  user team id chzn o 10  class  active-result  style    gt Under 15 South  1  lt  li gt  lt li id  user team id chzn o 11  class  active-result  style    gt Under 11 Pennant South East lt  li gt  lt li id  user team id chzn o 12  class  active-result  style    gt Under 11 South lt  li gt  lt  ul gt  lt  div gt  lt  div gt                   lt  div gt                 lt  div gt                 lt div class  control-group  gt                   lt label class  control-label  for  user mobile  gt Mobile lt  label gt                   lt div class  controls  gt                     lt input id  user mobile  maxlength  10  name  user mobile   placeholder  i e 0421813529  size  10  type  tel  gt                     lt span class  help-block  gt                       lt input name  user private mobile   type  hidden  value  0  gt  lt div class  checker  id  uniform-user private mobile  gt  lt span gt  lt div class  checker  id  uniform-user private mobile  gt  lt span gt  lt input id  user private mobile  name  user private mobile   type  checkbox  value  1  style  opacity  0    gt  lt  span gt  lt  div gt  lt  span gt  lt  div gt                       lt 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    gt Private lt  a gt                     lt  span gt                   lt  div gt                 lt  div gt                 lt div class  control-group  gt                   lt label class  control-label  for  user manager access  gt Manager access lt  label gt                   lt div class  controls  gt                     lt input name  user manager   type  hidden  value  0  gt  lt div class  checker  id  uniform-user manager  gt  lt span gt  lt div class  checker  id  uniform-user manager  gt  lt span gt  lt input id  user manager  name  user manager   type  checkbox  value  1  style  opacity  0    gt  lt  span gt  lt  div gt  lt  span gt  lt  div gt                   lt  div gt                 lt  div gt                 lt div class  control-group  gt                   lt label class  control-label  for  user admin access  gt Admin access lt  label gt                   lt div class  controls  gt                     lt input name  user admin   type  hidden  value  0  gt  lt div class  checker  id  uniform-user admin  gt  lt span gt  lt div class  checker  id  uniform-user admin  gt  lt span gt  lt input id  user admin  name  user admin   type  checkbox  value  1  style  opacity  0    gt  lt  span gt  lt  div gt  lt  span gt  lt  div gt                   lt  div gt                 lt  div gt               lt  div gt             lt  div gt             lt div class  modal-footer  gt               lt div class  pull-right  gt                 lt input class  btn btn-primary  name  commit  type  submit  value  Create User  gt                 lt a class  btn btn-danger  data-dismiss  modal  href     gt Cancel lt  a gt               lt  div gt             lt  div gt           lt  form gt         lt  div gt

User · Answer

Wrap your datapicker JavaScript code inside   function pageLoad

User · Answer

Try with this piece of code    ui-datepicker  z-index 1151  important     will solve the problem when you are using bootstrap V3

User · Answer

add z-index above 1051 in  class datepicker  add something like this in page or css    lt style gt   datepicker z-index 1151  important    lt  style gt

User · Answer

This solutions worked perfectly for me to render the datepicker on top of bootstrap modal   http   jsfiddle net cmpgtuwy 654   HTML   lt br  gt   lt div class  wrapper  gt  Some content goes here lt br   gt  Some more content   lt div class  row  gt   lt div class  col-xs-4  gt    lt  -- padding for jsfiddle -- gt   lt div class  input-group date  id  dtp  gt   lt input type  text  class  form-control    gt     lt span class  input-group-addon  gt     lt span class  glyphicon-calendar glyphicon  gt  lt  span gt   lt  span gt   lt  div gt   lt  div gt   lt  div gt   lt  div gt    Javascript      dtp   datetimepicker   format   MMM D  YYYY   widgetParent   body           dtp   on  dp show   function           var datepicker      body   find   bootstrap-datetimepicker-widget last          if  datepicker hasClass  bottom              var top     this  offset   top     this  outerHeight            var left     this  offset   left          datepicker css              top   top    px              bottom    auto              left   left    px                            else if  datepicker hasClass  top              var top     this  offset   top - datepicker outerHeight            var left     this  offset   left          datepicker css              top   top    px              bottom    auto              left   left    px                                CSS   wrapper   height  100px  overflow  auto   body   position  relative

User · Answer

Add z-indez in class ui-datepicker    lt style gt       ui-datepicker  z-index 1151  important     lt  style gt

User · Answer

Fwiw  Necro but still   for   lt link href    cdnjs cloudflare com ajax libs timepicker 1 3 5 jquery timepicker min css  rel  stylesheet  gt   I needed   lt style type  text css  gt   ui-timepicker-container  z-index  1151  important    lt  style gt        in the HEAD of the doc for it to accept the override  I tried most every other solution on here before resorting to that

User · Answer

For BootsTrap Calender use this   The Calender Index CSS    bootstrap-datetimepicker-widget      z-index 99999  important

User · Answer

I use    body modal-open  datepicker       z-index  1200  important      This way  if the modal isn t open  and you want the datepicker to be at the normal z-index  in my case I needed it to be under the menu drop-down  which has a z-index of 1000   it works    If the modal is open  the datepicker needs to be over the modal z-index  1040 or 1050   so use the body modal-open selector    I m using Bootstrap 3 1 1

User · Answer

try this   ui-datepicker-div     z-index  100000

User · Answer

for me it only worked with  important in css   datepicker  z-index  1151  important

User · Answer

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      This works form me  Even though I called model via ajax

User · Answer

I had this error  because i scrolled bottom  Datepicker had wrong top position in fixed  I just use it now like       myModal   on  show bs modal   function  e                  document  scrollTop 0         and its working fine now

User · Answer

Try to change z-index value for  modal and  modal-backdrop less than  datepicker z-index value

User · Answer

can you change in your css file bootstrap-timepicker css bootstrap-timepicker css  from    bootstrap-timepicker-widget dropdown-menu open     display  inline-block      to   bootstrap-timepicker-widget dropdown-menu open     display  inline-block    z-index 1151

User · Answer

try use this code it works for me  by the way it came from this site 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

User · Answer

if You  use bootstrap V3 try this          bootstrap-datetimepicker-widget                z-index  1200    important

User · Answer

I think is better to change the logical function in the plugin  Around row 552 i change this               var zIndex   parseInt this element parents   filter function                    return   this  css  z-index        auto                  first   css  z-index    10    into this               var zIndex   parseInt this element parents   filter function                    return   this  css  z-index        auto                  first   css  z-index      10   1000    think is enought

User · Answer

According to http   www daterangepicker com   options       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 solved my problem

User · Answer

re initialze datepicker     bootstrap-datepicker   bsdatepicker       format   yyyy-mm-dd       autoclose  true     on  changeDate   function  ev          this  bsdatepicker  hide               dropdown-menu   css   z-index   1100

User · Answer

let me help you   you can to update your bootstrap min css  in class dropdown-menu you can to change z-index value into 2000  so datepicker will show up

User · Answer

As mccannf said in his comment   I recommend you look at your bootstrap CSS and JS  Your modal is being set at a very high z-index value  99999   Just compare my jsfiddle above with yours

User · Answer

For Bootstrap 3 x and Ace Template wrapbootstrap  Datepicker and Timepicker inside a Modal   lt style gt      body modal-open  datepicker           z-index  1050  important            body modal-open  bootstrap-timepicker-widget           z-index  1050  important         lt  style gt

[jquery] Twitter Bootstrap Datepicker within modal window

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to datepicker