unable to open a jquery datapicker when used in a user control

unable to open a jquery datapicker when used in a user control

i have a content page. added the below jquery files 
<link rel="Stylesheet" href="Styles/CSS3.css" type="text/css" />
    <link rel="stylesheet" href="Styles/themes-smoothness-jquery-ui-v1.10.3.css" />
    <script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="Scripts/jquery-ui-1.10.3.js"></script>
and user control is added within update panel in the content page.

<div id="dialogpeventvalidate" style="visibility: hidden" >
        <asp:UpdatePanel ID="Updvalidate" UpdateMode="Conditional" ChildrenAsTriggers="true" runat="server">
            <ContentTemplate>
                <UserControl:PopEventValidate ID="PopEventValidate" runat="server" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

in user control have added the below script

<script type="text/javascript">
    function Validate() {
        var txtdate = document.getElementById("txtDatePicker");
        if (txtdate.value == '') {
            alert('Please enter last validated date.');
            txtdate.focus();
            return false;

        }
        return true;
    }
    function Setdate() {
        var txtdate = document.getElementById("txtDatePicker");
        var txtoriginaldate = document.getElementById("hdnDate").value;
        txtdate.value = txtoriginaldate;
        return false;
    }
        </script>
    <base target="_self" />
  <script type="text/javascript">
      $(document).ready(function () {
          //this code runs the datepicker fields
          var date = new Date();
          date.setDate(date.getDate());
          
            $("#<%=txtDatePicker.ClientID%>").datepicker({
        
                dateFormat: "mm/dd/yy",
                defaultDate: date,
                onSelect: function () {
                    selectedDate = $.datepicker.formatDate("mm/dd/yy", $(this).datepicker('getDate'));
                }
            });
            if ($("#<%=txtDatePicker.ClientID%>").datepicker("getDate") == null) {
            $("#<%=txtDatePicker.ClientID%>").datepicker('setDate', date);
          
        }
        });
    </script>

  <asp:TextBox ID="txtDatePicker" runat="server" CssClass="DatepickerInput" Width="75"></asp:TextBox>&nbsp;

when i click on the txtDatepicker, nothing happens, when javascript is enabled it says "Error: Object doesn't support property or method 'datepicker'" . if i click on debug i get the error in the below part . Please assist me .

 <script type="text/javascript">
      $(document).ready(function () {
          //this code runs the datepicker fields
          var date = new Date();
          date.setDate(date.getDate());
          
            $("#MainContent_PopEventValidateUC_txtDatePicker").datepicker({
        
                dateFormat: "mm/dd/yy",
                defaultDate: date,
                onSelect: function () {
                    selectedDate = $.datepicker.formatDate("mm/dd/yy", $(this).datepicker('getDate'));
                }
            });
            if ($("#MainContent_PopEventValidateUC_txtDatePicker").datepicker("getDate") == null) {
            $("#MainContent_PopEventValidateUC_txtDatePicker").datepicker('setDate', date);
          
        }
        });
    </script>