Bootstrap Datetime picker z-index

Change overflow-y: hidden; to overflow-y: visible;

.table-responsive {
  width: 100%;
  margin-bottom: 15px;
   overflow-y: visible;  // Add overflow-y visible
   overflow-x: scroll; 
  -ms-overflow-style: -ms-autohiding-scrollbar;
  border: 1px solid #ddd;
  -webkit-overflow-scrolling: touch;
}

Fiddle:http://jsfiddle.net/cjonkdf2/1/

The section you have added it in has overflow hidden set on it.

.table-responsive // overflow: hidden

This stops anything showing outside of itself.

Remove that and all will be good - with this at least but it might break other things

Add this css to your page/style sheet with the table in the header:

.table-responsive {
  overflow: visible !important;
}