Jquery ui date picker trigger on bootstrap placeholder

by TrueBlueAussie

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

JavaScript

$(document).ready(function() {
  $("#datepicker-my").datepicker();
  $('#btn').click(function() {
    //alert('clcikec');
    $("#datepicker-my").focus();
  });
});