SEO12580日期控制項是一種一個兼容性和外觀都很好的JS日期控制項,是用百度的日曆控制項修改過來的.
簡介,使用方法,頁面代碼,導入外掛程式,
簡介
一個兼容性和外觀都很好的JS日期控制項,是用百度的日曆控制項修改過來的.
下載地址: 在下面的引用參考資料里.
使用方法
頁面代碼
在頁面里放入日期控制項的html代碼:
<input type="text" name="years" id="years" size="4"/>年<input type="text" name="months" id="months" size="4"/>月<input type="text" name="days" id="days" size="4"/>日
<table cellpadding="0" cellspacing="0" id="1">
<tr>
<td><style>
body,td,.p1,.p2,.i{font-family:arial}
body{margin:6px 0 0 0;background-color:#fff;color:#000;}
table{border:0}
#cal{width:434px;border:1px solid #c3d9ff;font-size:12px;margin:0;}
#cal #toptime{height:29px;line-height:29px;background:#e7eef8;color:#003784;padding-left:70px}
#cal #toptime select{font-size:12px}
#cal #toptime input{padding:0}
#cal ul#wk{margin:0;padding:0;height:25px}
#cal ul#wk li{float:left;width:60px;text-align:center;line-height:25px;list-style:none}
#cal ul#wk li b{font-weight:normal;color:#c60b02}
#cal #cm{clear:left;border-top:1px solid #ddd;border-bottom:1px dotted #ddd;position:relative}
#cal #cm .cell{position:absolute;width:42px;height:36px;text-align:center;margin:0 0 0 9px; cursor:pointer;}
#cal #cm .cell .so{font:bold 16px arial;}
#cal #bm{text-align:right;height:24px;line-height:24px;padding:0 13px 0 0}
#cal #bm a{color:7977ce}
#cal #fd{display:none;position:absolute;border:1px solid #dddddf;background:#feffcd;padding:10px;line-height:21px;width:150px}
#cal #fd b{font-weight:normal;color:#c60a00}
</style>
<!--[if IE]>
<style>
#cal #toptime{padding-top:4px}
#cal #toptime input{width:65px}
#cal #fd{width:170px}
</style>
<![endif]-->
<div id="cal">
<div id="toptime">公元
<select>
</select>
年
<select>
</select>
月 農曆<span></span>年 [ <span></span>年 ]
<input type="button" value="回到今天" title="點擊後跳轉回今天" style="padding:0px">
</div>
<ul id="wk">
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li><b>六</b></li>
<li><b>日</b></li>
</ul>
<div id="cm"></div>
<div id="bm"></div>
</div></td>
</tr>
</table>
<tr>
<td><style>
body,td,.p1,.p2,.i{font-family:arial}
body{margin:6px 0 0 0;background-color:#fff;color:#000;}
table{border:0}
#cal{width:434px;border:1px solid #c3d9ff;font-size:12px;margin:0;}
#cal #toptime{height:29px;line-height:29px;background:#e7eef8;color:#003784;padding-left:70px}
#cal #toptime select{font-size:12px}
#cal #toptime input{padding:0}
#cal ul#wk{margin:0;padding:0;height:25px}
#cal ul#wk li{float:left;width:60px;text-align:center;line-height:25px;list-style:none}
#cal ul#wk li b{font-weight:normal;color:#c60b02}
#cal #cm{clear:left;border-top:1px solid #ddd;border-bottom:1px dotted #ddd;position:relative}
#cal #cm .cell{position:absolute;width:42px;height:36px;text-align:center;margin:0 0 0 9px; cursor:pointer;}
#cal #cm .cell .so{font:bold 16px arial;}
#cal #bm{text-align:right;height:24px;line-height:24px;padding:0 13px 0 0}
#cal #bm a{color:7977ce}
#cal #fd{display:none;position:absolute;border:1px solid #dddddf;background:#feffcd;padding:10px;line-height:21px;width:150px}
#cal #fd b{font-weight:normal;color:#c60a00}
</style>
<!--[if IE]>
<style>
#cal #toptime{padding-top:4px}
#cal #toptime input{width:65px}
#cal #fd{width:170px}
</style>
<![endif]-->
<div id="cal">
<div id="toptime">公元
<select>
</select>
年
<select>
</select>
月 農曆<span></span>年 [ <span></span>年 ]
<input type="button" value="回到今天" title="點擊後跳轉回今天" style="padding:0px">
</div>
<ul id="wk">
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li><b>六</b></li>
<li><b>日</b></li>
</ul>
<div id="cm"></div>
<div id="bm"></div>
</div></td>
</tr>
</table>
導入外掛程式
然後再在日期控制項頁面代碼的後面導入JS檔案
<script type="text/javascript" src="timec.js"></script>
點擊日期就會將對應的"年月日"自動填寫到input的HTML標籤里去了.
