为什么我的jquery日期选择器在asp.net代码中不起作用？

Question

I am trying to use jquery datepicker in my asp.net page. Somehow it isnt working and i saw alot of answers and also the jquery-ui's api , and i see no difference in what different i am doing ..

Here is my aspx code :

  <div class="form-group"
               <asp:Label ID="Label2" runat="server" CssClass="col-sm-2 col-sm-2 control-label" Text="Event Date :" Font-Bold="true" ForeColor="SlateBlue" Font-Size="Larger" />
                    <div class="col-sm-10">
                        <asp:TextBox ID="txtEventDate" runat="server" CssClass="form-control"></asp:TextBox>
                 </div>
          </div>

My script is :

<script>
        $(document).ready(function () {
            $('#txtEventDate').datepicker({
                numberOfMonths: 2,
                showButtonPanel: true
            });
        });
    </script>

Now , upon DOM inspection i found that the ID is not rendered as txtEventDate but as ContentPlaceHolder1_txtEventDate ( Note : I am using a master page here. )

I do not know why exactly the script is not working . is that because of the rendered different ID ??

My jquery implementation :

following are in masterpage :

<script src="assets/js/jquery.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/jquery-ui-1.9.2.custom.min.js"></script>
        <script src="assets/js/jquery.ui.touch-punch.min.js"></script>
        <script class="include" type="text/javascript" src="assets/js/jquery.dcjqaccordion.2.7.js"></script>
        <script src="assets/js/jquery.scrollTo.min.js"></script>
        <script src="assets/js/jquery.nicescroll.js" type="text/javascript"></script>
        <!--common script for all pages-->
        <script src="assets/js/common-scripts.js"></script>

And the one's i have included(just to be safe0 on the page where i am using datepicker() :

    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery-ui-1.9.2.custom.min.js"></script>

Answer 1

you should be able to change this:

 $('#txtEventDate').datepicker({

to:

$('#<%=txtEventDate.ClientID%>').datepicker({

That way it'll pick up the rendered ID correctly everytime