Skip to content
On this page

An image

How to solve bootstrap datepicker in modal

Simply wrap your datepicker code in bootstrap's modal shown event.

$('#your-modal').on('', function() {


Here is an full example Bootstrap DatePicker in Modal

<link href="//" rel="stylesheet"/>
<script src="//"></script>
<script src="//"></script>
<script src="//"></script>

    /* Optional: has to be larger than 1050 */
    .datepicker {
      z-index: 1600 !important;
    /* Optional: in case your body is less than datapicker height */
    .modal-body {
        height: 200px;

<div class="well">
  <button type="button" id="add">Add</button>
<div id="myModal" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
      <div class="modal-body">
$('#myModal').on('', function() {
    format: "dd/mm/yyyy",
    startDate: "01-01-2015",
    endDate: "01-01-2020",
    todayBtn: "linked",
    autoclose: true,
    todayHighlight: true,
    container: '#myModal modal-body'

$("[id=add]").click(function() {
  $("#myModal .modal-header h4").html("Request for Change");
  $("#myModal .modal-body").html('<form class="form-horizontal" role="form"><br /><br /><label class="col-sm-2 control-label">Date Required</label><div class="col-sm-3"><div class="input-group date col-sm-8"><input type="text" class="form-control" id="DateRequired"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div></form>');

Last updated: