jQuery DatePicker not shown inside Tab container using jQuery in ASP.Net

sthsyed

SOLVED CLOSED ACTIVE ANSWERED
User: sthsyed
Posted: on Aug 02, 2017 07:20 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 3782

i have a jquery datepicker it is working fine in all pages When i put this code in TabContainer it is not working. Please help me in this.

below is the link for jquery files i am using, but in code i am refering from my script.

<script type="text/javascript" src="Jquery/jquery-2.1.4.js"></script>
    <script src="Jquery/Date/jquery-ui.js" type="text/javascript"></script>
    <script type="text/javascript" src="Jquery/Date/jquery-ui.min.js"></script>
    <link href="Jquery/Date/jquery-ui.css" rel="stylesheet" type="text/css" />

     <script type="text/javascript">
         $(document).ready(function () {
             var daysToAdd = 4;
             $("#txtFromDate").datepicker({
                 dateFormat: "dd/mm/yy"

             });

             $("#txtToDate").datepicker({
                 dateFormat: "dd/mm/yy"
             });
         });
 </script>

    <script type="text/javascript">
        $(function () {
            $("#chkAddUserYes").change(function () {
                var ischecked = $(this).is(":checked");
                if (ischecked) {
                    $("#chkAddUserNo").removeAttr("checked");
                }
            });

            $("#chkAddUserNo").change(function () {
                var ischecked = $(this).is(":checked");
                if (ischecked) {
                    $("#chkAddUserYes").removeAttr("checked");
                }
            });
        })
</script> 
    <style type="text/css">
    .style1
        {
            width: 90%;
          height: 52px;
      }
        
         body {
   background-image: url(./Resource/1aaa-new.png);
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position:center;
   
  }
        #tblDetails0
        {
            height: 240px;
        }
        #tblDetailsSH
        {
            height: 266px;
        }
      </style>
</head>

<body>
    <form id="form1" runat="server">
    
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1" 
        Height="311px" Width="446px">
           <ajaxToolkit:TabPanel runat="server" HeaderText="TabPanel1" ID="tpRegister">
            <HeaderTemplate>Register<br /> <br /><br /><br /><br /></HeaderTemplate>
            

<ContentTemplate>
    <table id="tblVinSearch" border="1" cellpadding="2" cellspacing="2" frame="box" 
            style="border-color: #808080" width="50%">
            <tr>
                <td>
                    <asp:Label ID="Label1" runat="server" Font-Names="Times New Roman" 
                        Text="VinNumber"></asp:Label>
                </td>
                <td class="style10">
                    <asp:TextBox ID="txtVin6" runat="server" Width="160px"></asp:TextBox>
                    <asp:TextBox ID="txtVinNumber" runat="server" Height="1px" Visible="False" 
                        Width="1px"></asp:TextBox>
                </td>
                <td>
                    <asp:Button ID="btnVinSearch" runat="server" Font-Names="Times New Roman" 
                        style="margin-left: 0px" Text="Vin Search" />
                </td>
                <td>
                    <asp:TextBox ID="txtPlate" runat="server" Width="100px"></asp:TextBox>
                </td>
                <td class="style12">
                    <asp:Button ID="btnPlate" runat="server" Font-Names="Times New Roman" 
                        Text="Plate Search" />
                </td>
            </tr>
        </table>
    
        
    <br />
    
        <asp:Label ID="Label23" runat="server" Font-Bold="True" 
            Font-Names="Times New Roman" Font-Size="Large" Text="User Name : "></asp:Label>
    
        <asp:Label ID="lblUserName" runat="server" Font-Bold="True" 
            Font-Names="Times New Roman" Font-Size="X-Large"></asp:Label>
    
        <br />
        <asp:Label ID="Label24" runat="server" 
            Text="Show Room Manager / Retail Sales Manager" Font-Bold="True" 
            Font-Names="Times New Roman" Font-Size="X-Large" Font-Underline="True"></asp:Label>
        <br />
        <br />
        <asp:Label ID="Label25" runat="server" Text="Customer Contacted On : " 
            Font-Bold="True" Font-Names="Times New Roman" Font-Size="Large"></asp:Label>
    
                     &nbsp;<asp:Label ID="Label28" runat="server" Font-Bold="True" 
            Font-Names="Times New Roman" Font-Size="Large" Text="Date" ToolTip=" "></asp:Label>
&nbsp;<input id="txtFromDate" runat="server" type="text" clientidmode="AutoID" />&nbsp;
        <asp:Label ID="Label29" runat="server" Font-Bold="True" 
            Font-Names="Times New Roman" Font-Size="Large" Text="Time"></asp:Label>
        <br />
        <br />
        <asp:Label ID="Label26" runat="server" 
            Text="Customer is willing to visit the showroom" Font-Bold="True" 
            Font-Names="Times New Roman" Font-Size="Large"></asp:Label>
&nbsp;&nbsp;
<asp:CheckBox ID="chkAddUserYes" Text="Yes" runat="server" Class="test" 
            AutoPostBack="True" Font-Bold="True" Font-Names="Times New Roman" 
            Font-Size="Large"></asp:CheckBox>
            &nbsp;
            <asp:CheckBox ID="chkAddUserNo" Text="No" runat="server" Class="test" 
            AutoPostBack="True" Font-Bold="True" Font-Names="Times New Roman" 
            Font-Size="Large"></asp:CheckBox>
        <br />
        <asp:Panel ID="pnlApointment" runat="server" Visible="False">
            <asp:Label ID="Label27" runat="server" 
    Text="Appointment Detail" Font-Bold="True" Font-Names="Times New Roman" 
                Font-Size="Large"></asp:Label>
            &nbsp;
            <asp:Label ID="Label30" runat="server" Font-Bold="True" 
                Font-Names="Times New Roman" Font-Size="Large" Text="Date"></asp:Label>
            <input id="txtToDate" runat="server" type="text" />
            &nbsp;
            <asp:Label ID="Label31" runat="server" Font-Bold="True" 
                Font-Names="Times New Roman" Font-Size="Large" Text="Time"></asp:Label>
        </asp:Panel>
        <br />
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
        <br />
        </ContentTemplate>
        </ajaxToolkit:TabPanel>
            </ajaxToolkit:TabContainer>

Download FREE API for Word, Excel and PDF in ASP.Net

AnandM

0 3

Reply
ANSWER
User: AnandM
Replied: on Aug 02, 2017 07:44 AM
Report

sthsyed says:
  <script type="text/javascript">

         $(document).ready(function () {

             var daysToAdd = 4;

             $("#txtFromDate").datepicker({

                 dateFormat: "dd/mm/yy"

             });

             $("#txtToDate").datepicker({

                 dateFormat: "dd/mm/yy"

             });

         });

</script>

    <script type="text/javascript">

        $(function () {

            $("#chkAddUserYes").change(function () {

                var ischecked = $(this).is(":checked");

                if (ischecked) {

                    $("#chkAddUserNo").removeAttr("checked");

                }

            });

            $("#chkAddUserNo").change(function () {

                var ischecked = $(this).is(":checked");

                if (ischecked) {

                    $("#chkAddUserYes").removeAttr("checked");

                }

            });

        })

</script>

replace above with below

<script type="text/javascript">
    $(document).ready(function () {
        var daysToAdd = 4;
        $("[id*=txtFromDate]").datepicker({
            dateFormat: "dd/mm/yy"
        });

        $("[id*=txtToDate]").datepicker({
            dateFormat: "dd/mm/yy"
        });
    });
</script>
<script type="text/javascript">
    $(function () {
        $("[id*=chkAddUserYes]").change(function () {
            var ischecked = $(this).is(":checked");
            if (ischecked) {
                $("[id*=chkAddUserNo]").removeAttr("checked");
            }
        });

        $("[id*=chkAddUserNo]").change(function () {
            var ischecked = $(this).is(":checked");
            if (ischecked) {
                $("[id*=chkAddUserYes]").removeAttr("checked");
            }
        });
    })
</script>

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

jQuery DatePicker not shown inside Tab container using jQuery in ASP.Net

Company

Explore

Follow us

Contact Us