c# - 使用 JavaScript 函数显示日历

Question

我想制作一个日历，在单击日历图像时自行显示，并且无论何时选择日期，它都会显示在文本框中。我已经完成了这部分，但问题是每当我更改日历的月份时，页面会自行刷新并且日历显示再次变为无，而再次单击日历图像时，日历会显示下个月。我想在不刷新页面的情况下更改日历的月份。

我正在 Visual Studio 中制作它。我在网站上搜索查询，但几乎所有答案都使用 PHP(我不明白)。

代码:

<asp:TextBox ID="txtCal" runat="server"></asp:TextBox> <img alt="" src="CalendarImage.jpg" width="20px" height="20px" onclick="show()" /> </br>
<div id="cal">
<asp:Calendar ID="Calendar1" runat="server" onselectionchanged="Calendar1_SelectionChanged"></asp:Calendar>
</div>

OnChangingSelectedDate

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
    {
        txtCal.Text = Calendar1.SelectedDate.ToString("dd/MM/yyyy");
    }

样式表:

#cal
        {
            display: none; 
        }

JavaScript 函数:

function show() {
    document.getElementById("cal").style.display = "block";
}

Answer 1

使用这个java脚本

<script type="text/javascript">  
   function popupCalendar()
    {
      var dateField = document.getElementById('dateField'); // toggle the div 
      if (dateField.style.display == 'none') 
        dateField.style.display = 'block'; 
      else dateField.style.display = 'none';          

     } 
 </script>

和一个文本框:

      <asp:TextBox id="txtDate" Runat="server" /> <img src="cal.png"    onclick="popupCalendar()" />

和 div 标签中的日历:

    <div id="dateField" style="display:none;">  
<asp:Calendar id="calDate" OnSelectionChanged="calDate_SelectionChanged"  
        Runat="server" SelectionMode="Day" 
        onvisiblemonthchanged="calDate_VisibleMonthChanged" /> </div>

在后面的代码中:

     protected void calDate_SelectionChanged(object sender, EventArgs e)
{
    txtDate.Text = calDate.SelectedDate.ToString("d");
}
 protected void calDate_VisibleMonthChanged(object sender, MonthChangedEventArgs e)
{
  ClientScript.RegisterStartupScript(this.GetType(), "myScript", "<script language=JavaScript>popupCalendar();</script>");
}