0

我设计了一个下拉日历，但是如果我单击图像以显示下拉日历，我在文本框下方看不到它。如何在文本框下方显示此日历：

<table width=100%>
  <tr align=center>
    <td align=center>
      <asp:Panel ID="Panel2" runat="server" GroupingText="Suche" >
        <table width=100%>
          <tr align=center>
            <td align=center>
              <asp:Label ID="Label4" runat="server" Text="Von :"></asp:Label>
              <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
              <img id="Calimg1" src="Images/cal.jpg" onclick="selectdate()" />
              <div id="calblock1" class=calander >
                <asp:Calendar OnSelectionChanged="Calendar1_SelectionChanged"
                              ID="Calendar1" runat="server" BackColor="#FFFFCC" 
                              BorderColor="#FFCC66" BorderWidth="1px"
                              DayNameFormat="Shortest" Font-Names="Verdana"
                              Font-Size="8pt" ForeColor="#663399" Height="200px" 
                              ShowGridLines="True" Width="220px">
                  <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True"
                                  Height="1px" />
                  <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
                  <OtherMonthDayStyle ForeColor="#CC9966" />
                  <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
                  <SelectorStyle BackColor="#FFCC66" />
                  <TitleStyle BackColor="#990000" Font-Bold="True"
                              Font-Size="9pt" ForeColor="#FFFFCC" />
                  <TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
                </asp:Calendar>
              </div>
              <asp:RequiredFieldValidator ID="RequiredFieldValidator1"
                                          runat="server" 
                                          ControlToValidate="TextBox1"
                                          ErrorMessage="*" ForeColor="Red">
              </asp:RequiredFieldValidator>
            </td>
          </tr>
......

CSS：

.calander
{
    display:none;
    position:absolute
}

和我使用的 JavaScript：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#Calimg1').click(function () {
            if (isAnyVisible()) return false;
            $('#calblock1').slideToggle("slow");
        });

        $('#Img1').click(function () {
            if (isAnyVisible()) return false;
            $('#Div2').slideToggle("slow");
        });
    });

    function isAnyVisible() {
        if ($('#Calimg1').is(':visible') || $('#Img1').is(':visible')) {
            return false;
        }
        return true;
    }
4

2 回答 2

4

您已指定positionis absolute，这是正确的轨道。但是，您缺少一些东西。

首先，绝对元素的父级应该有position:relative. 如果没有该相对父级，当您指定 a 时top，left它将相对于整个文档。如果您使用的坐标是相对于容器的，那么使用起来会容易得多。

接下来，嵌套表很糟糕。使用 div，消除其中一些容器。CSS 定位、浮动、边距和填充将实现相同的结果。

文件

于 2012-06-21T06:50:34.367 回答
0

如果您有 2012 或更高版本，则可以更好地使用本机 .Net工具。使用任何文本框，然后转到属性并将TextMode更改为DateTimeLocal。这将创建一个非常好的下拉日历。注意：如果您的 IE 太旧，它不会显示日历，因此请尝试在 Chrome 和 Firefox 上调试它。

于 2015-05-06T13:22:51.253 回答