CODEWITHSUNDEEP
javascriptjqueryasp.netjquery-ui
Abhishek Ghosh
Abhishek Ghosh

Reputation: 2706

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

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 .

Upvotes: 1

Views: 505

Answers (1)

Hugo Yates
Hugo Yates

Reputation: 2111

you should be able to change this:

 $('#txtEventDate').datepicker({

to:

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

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

Upvotes: 2

Related Questions