如何在文本框单击上更改日历的可见性

Question

我想使用TextBox 和Calendar 来制作如下所示的日期选择字段，

<asp:TextBox ID="date_selected" Enabled="false" CssClass="date" runat="server" MaxLength="10"></asp:TextBox>
<asp:ImageButton ID="image_calendar" runat="server" Width="32px" ImageAlign="AbsMiddle" Height="32px" ImageUrl="/Images/calendar.png" OnClick="image_calendar_Click"></asp:ImageButton>
<asp:Calendar ID="calendar" Visible="false" runat="server" OnSelectionChanged="calendar_SelectionChanged"></asp:Calendar>

在这里，当我单击ImageButton 时，Calendar 将变为可见，在我单击日期后，TextBox 将使用下面的脚本填充该日期，

protected void image_calendar_Click(object sender, ImageClickEventArgs e)
{
    calendar.Visible = true;
}

protected void calendar_SelectionChanged(object sender, EventArgs e)
{
    date_selected.Text = calendar.SelectedDate.ToShortDateString().ToString();
    calendar.Visible = false;
}

但我想在不使用ImageButton 的情况下执行此操作，并且当我单击TextBox 本身时，应显示Calendar。但是TextBox 没有任何OnClick 功能。有没有其他方法可以在CSS 中使用TextBox:focus 或使用JavaScript 或JQuery？

在CSS 中，我知道我们可以使用属性display: none 和“可见性：隐藏”来隐藏项目的可见性，但是有什么方法可以做到这一点吗？

#date_selected:focus {
    // set visibility of Calendar to "visible"
}

最终代码（编辑）

下面是我使用的最终代码。

ASP.NET

<asp:TextBox ID="date_selected" ReadOnly="true" MaxLength="10" AutoPostBack="true" runat="server"></asp:TextBox>
<asp:Calendar ID="calendar" runat="server" OnSelectionChanged="calendar_SelectionChanged"></asp:Calendar>

C#

protected void calendar_SelectionChanged(object sender, EventArgs e)
{
    date_selected.Text = calendar.SelectedDate.ToShortDateString().ToString();
    calendar.Visible = false;
}

CSS

#calendar {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index : 9999 !important;
}

#date_selected:focus ~ #calendar {
    visibility: visible;
    position: absolute;
    opacity: 1;
}

但是在显示日历之后，即使我点击了任何日期，它也没有在文本框中得到更新？我不知道为什么？不只是在任何日期，如果我单击日历上的任何地方我什至无法更改月份，日历就会消失。也许当我点击日历上的某个地方时，文本框上的焦点消失了，日历也消失了。我该如何解决这个问题？

Answer 1

要将其置于其他 div 之上，您可以使用 z-index

#date_selected:focus ~ #calendar {
    visibility: visible;
    position: absolute;
    opacity: 1;
    z-index : 9999 !important;
}

另外，通过使用Jquery，你应该把它放在document ready函数中以使其工作

$(document).ready(function () {
     $('#date_selected').focus(function() { $('#Calendar ').show(); });
});

如果要添加日历功能，也可以使用datepicker。它是 Jquery 中一个不错、简单且易于使用的插件。通过使用datepicker，您不必再设置css 和日历。然后你会像这样使用它：

$(document).ready(function () {
     $('#date_selected').datepicker();
});

Answer 2

您只需使用Ajax Toolkit即可实现上述目标，试试下面的一个

<form id="form1" runat="server">
    <div>
    <asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
    <asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager>
    <cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtDate" PopupButtonID="txtDate" >
</cc1:CalendarExtender>
    </div>
    </form>