Place Bootstrap Datepicker on Bootstrap Modal

I am displaying below HTML as initial content.

<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        //more code here
      </div>
      <div>
        <div class="tplan">
          //more code here
        </div>
        <div></div>
        <div class="tplan">
          //more code here
        </div>
      </div>
    </div>
  </div>
</div>

Below HTML is my second screen on modal.

<div class="tab modal-content">
    <div>
        <div class="form-row">                
            <div class="form-group col-md-3">
                <label for="plan_start">Plan Start</label>
                <input type="text" class="form-control" name="plan_start" id="datepicker">
            </div>
        </div>
    </div>
</div>

I am using below jQuery code to show bootstrap modal. I would like to show bootstrap datepicker on bootstrap modal. But this is not working.

        $(document).ready(function(){
            var modalContent = $('.modal-content').eq(0).html();

            $("#plan_templates").click(function() {
                $('.modal').find('.modal-content').html(modalContent);                
                $(".modal").modal("show");


                $(".tplan").click(function() {
                    var index = $(".tplan").index(this);
                    $('.modal').find('.modal-content').html($('.tab').eq(index).html());

                    $('.modal').on('shown.bs.modal', function(e) {
                        $('#datepicker').datepicker({
                            format: "mm/yyyy",
                            startView: "year", 
                            minViewMode: "months"
                        });
                    });
                });
            });
        });