Jquery DateTimePicker not working with asp.net master page and content page

Question

I have been struggling to get the datetime picker working with Asp.net 4.0. I have added the jquery-1.5.2.min.js and jquery-datepicker.js inside the scripts folder. I'm getting error message

Microsoft JScript runtime error: Object doesn't support this property or method

inside jquery-1.5.2.min.js .

I went through the similar questions posted in stackoverflow, but still not able to resolve the answer. I'm sure that the script path is not getting resolved properly. I tried different combinations adding the script tag in Master and also content page.It still did not work. I also tried ResolveUrl in content page, it still failed.

Updated code - still gives error for me. ' type="text/javascript">
' type="text/javascript">
' rel="stylesheet" type="text/css" />

       $(document).ready(function ()
        {
           $("#<%=TextBox1.ClientID %>").datepicker(); 
        });     

         </script>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server"> 
        <script type="text/javascript" src="../Scripts/jquery-1.5.2.min.js" ></script> 
         <script type="text/javascript" src="../Scripts/jquery-datepicker.js" ></script>
        <script type="text/javascript" language="javascript"> 
        $(document).ready(function () 
       {

     $(function () {
         $("#<%=txtDateFrom.ClientID %>").datepicker();             
     });

 }); /*----------------------End of Document Ready----------------------------*/
</script>

Can someone who has worked with Master and content pages and have included jquery datetime picker in the content page help me please?

did you use firebug or dev tools in chrome to check what path it's looking at and if the js files are loading? Even in FF if you just "View Source" you can click the src links to make sure that the page is actually loading your files — Eonasdan
also if your page is in .com/foo/bar/page.aspx then your script points to .com/foo/jquer... — Eonasdan
This is probably unrelated, but I suggest you update jQuery to 1.7.2 via NuGet. Also referencing your scripts like this is better: <script src="@Url.Content("~/Scripts/jquery-ui-timepicker-addon.js")" type="text/javascript"></script> I don't see a reference to a DateTimePicker, but if you need a good one use this — Shahin Dohan
@ShahinDohan the OP doesn't look he's using razor views (or mvc for that matter) so the @Url wouldn't work for him (I think). While I've used the timepicker you linked to it required jquery ui which he's also not referencing. — Eonasdan

Hanlet Escaño Hanlet Escaño · Accepted Answer · 2012-07-26T20:34:35

Unless there is a specific reason why you can't use a Repository like Google's or jQuery, I would suggest you add the jQuery library from one.

<script src="http://code.jquery.com/jquery-latest.js"></script>

Edit: Seems like you have this in the body of the page. Try adding it to the Header (maybe Content1 contentplaceholder?)

Good luck!

EDIT: I have now created a folder called Course, and a page called Course.aspx and this works for me:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
        CodeFile="Course.aspx.cs" Inherits="Course_Course" %>

        <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
            <script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
            <script src='=<%Response.Write(Page.ResolveUrl("~/Scripts/jquery.ui.datepicker.js")); %>' type="text/javascript"></script>
            <script src='<%Response.Write(Page.ResolveUrl("~/Scripts/jquery-ui-1.8.22.custom.min.js"));%>' type="text/javascript"></script>
            <link href='<%Response.Write(Page.ResolveUrl("~/Styles/jquery-ui-1.8.22.custom.css")); %>' rel="stylesheet" type="text/css" />
            <script language="javascript" type="text/javascript">
                $(document).ready(function () {
                    $("#<%=TextBox1.ClientID %>").datepicker();
                });
            </script>
        </asp:Content>
        <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        </asp:Content>

Good luck!

Jquery DateTimePicker not working with asp.net master page and content page

1 Answers