2

我在我的页面上使用基本的日期选择器输入。在我的页面上，我使用 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>
</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>
4

2 回答 2

0

我建议不要在页面加载或文档准备时绑定日期选择器，只需在文本框单击事件上调用日期选择器，如下所示

<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");
    }
于 2013-09-17T17:20:17.447 回答
0

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

于 2019-06-12T14:44:56.867 回答