Jquery ui date picker trigger on bootstrap placeholder

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<table class="table table-hover">
  <colgroup>
    <col width="50" />
    <col width="100" />
    <col width="100" />
  </colgroup>

  <tr>
    <td>&nbsp;</td>
    <td>
      <div class="input-group">
        <input type="text" class="datepicker-my form-control" placeholder="Select Date" />
        <span class="input-group-addon btn" style="cursor:pointer;">
              <span class="glyphicon glyphicon-calendar"></span>
        </span>
      </div>
    </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>
      <div class="input-group">
        <input type="text" class="datepicker-my form-control" placeholder="Select Date" />
        <span class="input-group-addon btn" style="cursor:pointer;">
              <span class="glyphicon glyphicon-calendar"></span>
        </span>
      </div>
    </td>
    <td>&nbsp;</td>
  </tr>
</table>

JavaScript

$(function() {
  $(".datepicker-my").datepicker();
  $('.btn').click(function() {
    $(".datepicker-my", $(this).closest(".input-group")).focus();
  });
});