使用JavaScript函数显示日历
Showing Calendar Using JavaScript Function
我想制作一个日历,在单击日历图像时显示自己,并且每当选择日期时,它都会显示在文本框中。我已经完成了这一部分,但问题是每当我更改日历的月份时,页面就会自行刷新,日历显示将再次变为无,而再次单击日历图像时,日历将显示下一个月。我想在不刷新页面的情况下更改日历的月份。
我正在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";
}
使用此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>");
}
相关文章:
- 如何在完整日历中的当天点击时显示活动详细信息
- 日历显示不正确
- php:两个日历没有显示
- 完整日历 (v2) 在每周视图槽的顶部显示弹出框
- 使用完整日历在网站上获取并显示来自Google日历事件的附加图像
- Angular Material DatePicker日历显示在Angular Modal后面
- jQuery-克隆的日期选择器日历未显示在日期选择器字段旁边
- 完整日历未显示在引导模式中
- 水平日历今天的日期以纯javascript突出显示
- 谷歌日历订阅源未显示事件
- Jqueryui日期选择器不显示日历
- 为什么浏览器不't显示我的日历
- 日历显示 24 小时制,我需要 12 小时制
- jQuery UI 日历显示加载事件
- 完整日历显示更多来自javascript的事件并显示这些事件
- 不能通过日历显示iCal提要
- 使用完整日历显示不同颜色的多个事件
- 我如何得到完整的日历显示日历在初始渲染
- 如何使用完整日历显示当前日期
- JavaScript日期选择器/日历-显示错误的当前日期