Why doesn't my jquery date-picker not work in my asp.net code?

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>

Please have a look at the following errors .

Yes that's the issue. You have to put the rendered ID to the datepicker method. — Frebin Francis
– Frebin Francis, Commented Feb 20, 2015 at 17:49
Either you can put the rendered ID for creating datepicker instead of txtEventDate or you can set a CSS class for that textbox and use that instead of ID. — Frebin Francis
– Frebin Francis, Commented Feb 20, 2015 at 17:53

Hugo Yates · Accepted Answer · 2015-02-20 17:52:06Z

2

you should be able to change this:

 $('#txtEventDate').datepicker({

to:

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

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

answered Feb 20, 2015 at 17:52

Hugo Yates

2,1112 gold badges27 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Hugo Yates Over a year ago

if you do $('#ContentPlaceHolder1_txtEventDate').datepicker({ does it work then?

Abhishek Ghosh Over a year ago

can it be not working because of the api that i am using ? I am using an api which is in my template !

Hugo Yates Over a year ago

I don't think your JQuery UI is being loaded in correctly. Can you edit your question to include your JS and CSS implementation?

Abhishek Ghosh Over a year ago

Please see i ve added a screenshot too.. There are 3 errors out of which one is of js .

Hugo Yates Over a year ago

I see that you're using a customised version of the Jquery UI - this could be the issue in that you're lacking the library code for the datepicker. Try temporarily replacing it with <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

|

Collectives™ on Stack Overflow

Why doesn't my jquery date-picker not work in my asp.net code?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related