Question

我在页面上使用基本的日期选择器输入。在我的页面上，我使用Jquery选项卡来呈现内容。当我导航到其他选项卡然后返回带有日期选择器输入的页面时，日历不会显示。

这是我的母版页代码，其中有标签：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="Styles/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />

<script src="Scripts/jquery-2.0.3.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.10.3.js" type="text/javascript"></script>
<link href="Styles/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />


<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>

<script type="text/javascript">

    $(function () {
        $(".tabs").tabs({

                        });




    });



  </script>
</head>
<body>
<form runat="server">
<div class="page">
    <div class="header">
        <div class="title">
            <h1>
                &nbsp;<asp:Image ID="Image1" runat="server" ImageUrl="~/Content/CCLogo.jpg" />
            </h1>
        </div>
        <div class="loginDisplay">
            <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
                <AnonymousTemplate>
                    [ <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> ]
                </AnonymousTemplate>
                <LoggedInTemplate>
                    Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
                    [ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
                </LoggedInTemplate>
            </asp:LoginView>
        </div>
        <div class="clear hideSkiplink">


            <div id="tabs" class="tabs">
                  <ul>
                    <li><a href="My Audits.aspx">My Audits</a></li>
                    <li><a href="My Claims.aspx">My Claims</a></li>
                    <li><a href="Reports.aspx">Reports</a></li>
                    <li><a href="Maintenance.aspx">Maintenance</a></li>
                  </ul>

                </div>
        </div>
    </div>
    <div class="main">
        <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
    </div>
    <div class="clear">
    </div>
</div>
<div class="footer">

</div>
</form>
</body>
</html>

这是我的日期选择器页面：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-2.0.3.js" type="text/javascript"></script>   
<link href="Styles/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-ui-1.10.3.js" type="text/javascript"></script>


 <script type="text/javascript">
 $(document).ready(function () {

     $('.datepicker').datepicker();

     $.ajax({
         type: "POST",
         contentType: "application/json; charset=utf-8",
         data: "{}",
         url: "WebService1.asmx/GetCompanies",
         dataType: "json",
         success: ajaxSucceess,
         error: ajaxError
     });

     function ajaxSucceess(data) {

         $.each(data.d, function (index, elem) {
             $("<option />")
              .text(elem.CompanyDesc)
              .val(elem.CompanyCode)
              .appendTo("#Select1");
         });
     }

     function ajaxError(response) {
         alert(response.status + ' Fail' + response.statusText);
     }
  });


 var count = 0;
 function changeValue() {

     count += 1;
     if (count == 1) {
         var $node = '<tr><td>Index Number:</td><td><input id="inputnumber"/></td></tr>';
         $('#MyAuditsSearch').append($node)
     };
 }






</script>   
</head>
<body>
<form id="form1" runat="server">
<table id="MyAuditsSearch">  
 <tr>
<td>Date Range: </td>
<td><input type="text" id ="datepicker" class="datepicker"/></td>
<td>to</td>
<td><input type="text" id ="datepicker2" class="datepicker"/></td>
 </tr>
 <tr>
<td>Audit Program</td>
<td><select id="Select1" class="select" onchange="changeValue()"><option>---Select------</option>  </select></td>
</tr>


 </table>  

 </form>
 </body>
 </html>

Answer 1

我建议不要在页面加载或文档就绪上绑定datepicker而只是在文本框点击事件上调用datepicker，如下所示

<input type="text" id="txtFWCDate" name="txtFWCDate" style="width: 100" onclick="showDatePicker(this);"
                                                    onblur="Validate_Date(this);" class="txtDatePicker" />

function showDatePicker(varCont) {

        $(varCont).datepick({ dateFormat: 'm/d/yyyy'
        });

        $(varCont).datepick({ dateFormat: 'm/d/yyyy' }).datepick("show");
    }

Answer 2

正如对该问题的评论所述，我问题的解决方案是查找并删除重复的JQueryUI声明。

切换标签后日期选择器不工作

2 个答案: