main:
date_time.html
<!--
author simplaman simplaman@hotmail.com
-->
<html>
<head>
<title>时间,日期输入控件</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table>
<tr>
<td>日期、时间：</td>
<td>
<input class="LabeledInput" value="1106665564200" format="DateTime"></td>
</tr>
<tr>
<td>输入日期：</td>
<td>
<input class="LabeledInput" value="" format="Date"></td>
</tr>
<tr>
<td>输入时间：</td>
<td>
<input class="LabeledInput" value="" format="Time"></td>
</tr>
</table>
<div id="datePanel" style="position:absolute;display:none">
<link rel="stylesheet" href="date.css">
<fieldset id="dateInput">
<legend>日期</legend>
<table border="0" cellspacing="0" cellpadding="0" width=100% >
<tr>
<td rowspan="2" width=90% align=right><input id="yearInput" class="TimeInput" maxValue=2999>年</td>
<td><input type=button value=5 class="Arrow" tabindex="-1"></td>
<td rowspan="2">
<select>
<option>一月</option>
<option>二月</option>
<option>三月</option>
<option>四月</option>
<option>五月</option>
<option>六月</option>
<option>七月</option>
<option>八月</option>
<option>九月</option>
<option>十月</option>
<option>十一月</option>
<option>十二月</option>
</select>
</td>
</tr>
<tr>
<td><input type=button value=6 class="Arrow" tabindex="-1" ></td>
</tr>
</table>
<table border="1" width=100%>
<tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
</fieldset>
<fieldset id="timeInput">
<legend>时间</legend>
<table border="0" cellspacing="0" cellpadding="0" width=100%>
<tr>
<td rowspan="2" width=90% align=right><input class="TimeInput" maxValue=23>点</td>
<td rowspan="2" nowrap><input class="TimeInput" maxValue=59>分</td>
<td rowspan="2" nowrap><input class="TimeInput" maxValue=59>秒 </td>
<td><input type=button value=5 class="Arrow" tabindex="-1"></td>
</tr>
<tr>
<td><input type=button value=6 class="Arrow" tabindex="-1" ></td>
</tr>
</table>
</fieldset>
<center>
<input type="button" value="确定">
<input type="button" value="取消">
<input type="button" value="清空">
</center>
</div>
</body>
</html>
date.css
#datePanel{
border: 1px solid #BEBEBE;
background-color: #F2F9F3;
width: 180px;
}
#datePanel table{
background-color: #eeeeee;
border-collapse:collapse;
}
#datePanel th{
background-color: #dddddd;
}
#datePanel td{
cursor: hand;
}
#datePanel input,select{
margin: 0;
}
#datePanel .Selected{
background-color: #cccccc;
color: #ff0000;
}
#yearInput{
width: 32px;
}
.Date,.Time,.DateTime{
behavior:url('date.htc');
border: 1px ridge #FF0000;
cursor: hand;
padding:0 2 0 2;
}
.Arrow {
height:9px;
font-family: "Webdings";
font-size: 9px;
line-height: 1px;
padding:0;
}
.TimeInput{
width: 18px;
height: 14px;
border: none;
text-align:center;
font-size: 12px;
ime-mode: disabled;
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
