locked
Datepicker doesn't work RRS feed

  • Question

  • User66371569 posted

    i use this  datepicker to  get date calendar

    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

    <script>

    $(document).ready(function () {
    // Datepicker Popups calender to Choose date.
    $(function () {
    $("#<%= TextBox1.ClientID%>").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'dd/mm/yy',
    yearRange: '1950:2018'

    });
    // Pass the user selected date format.

    });
    });


    </script>

    Its working fine when i  create wbform page  out of master page

    but when  i put same code in content page for master   

    not working at all  and  when i run page   error appears

    0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'datepicker'

    Please help me.

    Tuesday, October 23, 2018 11:16 AM

Answers

  • User-893317190 posted

    Hi thepast,

    If you use master page and put your js in master page,you should be careful that the js will be covered by childpage.

    Below is a small sample. 

    Master page.

    <head runat="server">
        <title></title>
        <asp:ContentPlaceHolder ID="head" runat="server">
            <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
    
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                  
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </div>
        </form>
    </body>

    Child page.You should comment out the Content with the ContentPlaceHolderId of head ,or it will cover the content of <asp:ContentPlaceHolder ID="head" runat="server">.

    <%--<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>--%>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    
        <script>
    $(document).ready(function () {
    // Datepicker Popups calender to Choose date.
    $(function () {
    $("#<%= TextBox1.ClientID%>").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'dd/mm/yy',
    yearRange: '1950:2018'
    });
    // Pass the user selected date format.
    
    });
    });
    
    </script>
    </asp:Content>

    If it is not your case , as mgebhard  has said, please post your related code.

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 24, 2018 4:15 AM

All replies

  • User475983607 posted
    According to the error you forgot the jQuery UI reference or declared the date picker before the reference. Please take s few moments to review your code. If you need help debugging post sample code that reproduces the issue.
    Tuesday, October 23, 2018 11:23 AM
  • User66371569 posted

    what i can do

    I don't know

    Tuesday, October 23, 2018 11:40 AM
  • User475983607 posted

    what i can do

    I don't know

    As clearly recommended above, if you are unable to troubleshoot, then post all the relevant code.  At this point, we can only guess where the errors are in your code.  But the error points to a missing jQuery UI/jQuery reference.

    Tuesday, October 23, 2018 12:59 PM
  • User-893317190 posted

    Hi thepast,

    If you use master page and put your js in master page,you should be careful that the js will be covered by childpage.

    Below is a small sample. 

    Master page.

    <head runat="server">
        <title></title>
        <asp:ContentPlaceHolder ID="head" runat="server">
            <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
    
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                  
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </div>
        </form>
    </body>

    Child page.You should comment out the Content with the ContentPlaceHolderId of head ,or it will cover the content of <asp:ContentPlaceHolder ID="head" runat="server">.

    <%--<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>--%>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    
        <script>
    $(document).ready(function () {
    // Datepicker Popups calender to Choose date.
    $(function () {
    $("#<%= TextBox1.ClientID%>").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'dd/mm/yy',
    yearRange: '1950:2018'
    });
    // Pass the user selected date format.
    
    });
    });
    
    </script>
    </asp:Content>

    If it is not your case , as mgebhard  has said, please post your related code.

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 24, 2018 4:15 AM