本文介绍了一个基于HTML、CSS及JavaScript实现的日历组件案例。该组件包含日期选择器及下拉菜单等功能，通过简单的HTML表单元素配合JavaScript进行事件绑定和处理。文中展示了如何使用特定的HTML结构和JavaScript代码来实现日期的动态展示与交互。
<HEAD>
<LINK HREF="Calendar.css" TYPE="text/css" REL="stylesheet">
<script src="Calendar.js"></script>
</HEAD>
<BODY>
<div id="calendar"></div>
<FORM METHOD="post" name="aa">
<table cellSpacing="1" cellPadding="1" width="100%" border="0">
<tr>
<td>
<!--日期实例化--begin-->
<input type="text" name="txtDATE" size="10" onchange='javascript:gChangeDate(this,0);'
onblur='javascript:gChangeDate(this,0);'> <INPUT TYPE="button" value='...' NAME='bntDATE' OnClick='showCalendar(txtDATE,0)' class="button">
<!--end-->
<select size="1" name="REC_SOURCE_SCUR" style="WIDTH:100px; zIndex:0">
<OPTION VALUE="" selected></OPTION>
<OPTION VALUE="1">1</OPTION>
<OPTION VALUE="2">2</OPTION>
</select>
</td>
</tr>
</table>
</FORM>
</BODY>
<LINK HREF="Calendar.css" TYPE="text/css" REL="stylesheet">
<script src="Calendar.js"></script>
</HEAD>
<BODY>
<div id="calendar"></div>
<FORM METHOD="post" name="aa">
<table cellSpacing="1" cellPadding="1" width="100%" border="0">
<tr>
<td>
<!--日期实例化--begin-->
<input type="text" name="txtDATE" size="10" onchange='javascript:gChangeDate(this,0);'
onblur='javascript:gChangeDate(this,0);'> <INPUT TYPE="button" value='...' NAME='bntDATE' OnClick='showCalendar(txtDATE,0)' class="button">
<!--end-->
<select size="1" name="REC_SOURCE_SCUR" style="WIDTH:100px; zIndex:0">
<OPTION VALUE="" selected></OPTION>
<OPTION VALUE="1">1</OPTION>
<OPTION VALUE="2">2</OPTION>
</select>
</td>
</tr>
</table>
</FORM>
</BODY>
扫一扫
244
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
