Jquery ui date picker trigger on bootstrap placeholder

by Rahul Gupta

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

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