retrieve id of textbox from content place holder in jquery function

I am using JQUERY UI for my web pages. I am trying to use datepicker control. The problem is jquery function is not taking the textbox ID. It is working when I concatenate the content placeholder id with textbox id.

<asp:Content ID="PassportContent" ContentPlaceHolderID="CPH001" runat="server">
<div class="form-group">
    <label>Date Of Birth</label>
    <asp:TextBox ID="datepicker" runat="server" CssClass="txt-control"></asp:TextBox>
</div>
</asp:Content>

actual jquery code

<script src="../jquery/external/jquery/jquery.js"></script>
<script src="../jquery/jquery-ui.min.js"></script> 
<script>
    $(function () {
        $("#datepicker").datepicker();
    });
</script>

working jquery code

<script>
    $(function () {
        var temp = document.getElementById('<%= datepicker.ClientID %>').value;
        alert(temp);
        $("#CPH001_datepicker").datepicker();
    });
</script>

When I searched in forums most of the solutions suggested to use document.getElementById, I tried getting the ID using >>

document.getElementById('<%= datepicker.ClientID %>').value; but the alert box is showing NULL.

1. How to solve this problem?
2. When I keep my js code in seperate file, how to solve this problem ?

As suggested, I used $("[id$=datepicker]").datepicker();. And it works I am getting the datepicker. But I cannot change the date format and restrict the date range. Please suggest.

<script>
    $(function () {
        $("[id$=datepicker]").datepicker();        

        $("[id$=datepicker]").datepicker({ dateFormat: 'ISO 8601 - yy-mm-dd' }); // not working
    });
    // not working
    $("#format").change(function () { $("[id$=datepicker]").datepicker('ISO 8601 - yy-mm-dd', "dateFormat", $(this).val()); });
</script>

When Content page renders Textbox id Changes. Use Textbox id like this

<script>
$(function () {
    $("[id$=datepicker]").datepicker();
});
</script>

See How to use JQuery with Master Pages?