使用JavaScript函数显示日历

本文关键字：日历 显示 函数 JavaScript 使用 | 更新日期: 2023-09-27 18:19:44

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

我正在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>

OnChanging选择日期

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";
}

使用JavaScript函数显示日历

使用此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>");
}
相关文章：