本文为大家写了个很漂亮
兼容火狐的Js日期选择
自动填充到输入框
代码如下
有需要的朋友可以参考下
复制代码 代码如下:
<html>
<head>
<title>很漂亮兼容火狐的Js日期选择自动填充到输入框</title>
<meta httpequiv="contentType" content="text/html;charset=gb">
<style type="text/css">
body{fontsize:px;fontfamily:VerdanaArial"宋体";}
a:link {color:#;textdecoration:none;}
a:visited {color:#;textdecoration:none;}
a:hover{color:#edb;textdecoration:underline;}
a:active{color:#edb;textdecoration:underline;}
td{fontsize:px}
/*/*/
/*DateCSS样式*/
header {font: px Arial Tahoma !important;fontweight: bold !important;font: px Arial Tahoma;fontweight: bold;color: #BA;background:#CDEED;height: px;paddingleft: px;
}
header td {paddingleft: px;}
header a {color: #BA;}
header input {background:none;verticalalign: middle;height: px;}
category {font: px Arial Tahoma !important;font: px Arial Tahoma;color: #AA;height:px;backgroundcolor: #FFFFD;}
category td {borderbottom: px solid #DEDEB;}
expire expire a:link expire a:visited {color: #;}
default default a:link default a:visited {color: #;}
checked checked a:link checked a:visited {color: #FF;}
today today a:link today a:visited {color: #BB;}
#calendar_year {display: none;lineheight: %;background: #FFFFFF;position: absolute;zindex: ;}
#calendar_year col {float: left;background: #FFFFFF;marginleft: px;border: px solid #BD;padding: px;}
#calendar_month {display: none;background: #FFFFFF;lineheight: %;border: px solid #BD;padding: px;position: absolute;zindex: ;}
tableborder {background: white;border: px solid #BD;}
#year#month{paddingright:px;}
</style>
<script language="javascript">
//下面的代码段如果你页面里有可以去掉
var ie =navigatorappName=="Microsoft Internet Explorer"?true:false;
function $(objID){
return documentgetElementById(objID);
}
</script>
</head>
<body>
<script type="text/javascript">
var controlid = null;
var currdate = null;
var startdate = null;
var enddate = null;
var yy = null;
var mm = null;
var hh = null;
var ii = null;
var currday = null;
var addtime = false;
var today = new Date();
var lastcheckedyear = false;
var lastcheckedmonth = false;
function _cancelBubble(event) {
e = event ? event : windowevent ;
if(ie) {
ecancelBubble = true;
} else {
estopPropagation();
}
}
function getposition(obj) {
var r = new Array();
r[x] = objoffsetLeft;
r[y] = objoffsetTop;
while(obj = objoffsetParent) {
r[x] += objoffsetLeft;
r[y] += objoffsetTop;
}
return r;
}
function loadcalendar() {
s = ;
s += <div id="calendar" style="display:none; position:absolute; zindex:;" onclick="_cancelBubble(event)">;
if (ie)
{
s += <iframe width="" height="" src="about:blank" style="position: absolute;zindex:;"></iframe>;
}
s += <div style="width: px;"><table class="tableborder" cellspacing="" cellpadding="" width="%" style="textalign: center">;
///
s += <tr align="center" class="header"><td class="header"><a href="#" onclick="refreshcalendar(yy mm);return false" title="上一月"><<</a></td><td colspan="" style="textalign: center" class="header"><a href="#" onclick="showdiv(\year\);_cancelBubble(event);return false" title="点击选择年份" id="year"></a> <a id="month" title="点击选择月份" href="#" onclick="showdiv(\month\);_cancelBubble(event);return false"></a></td><td class="header"><A href="#" onclick="refreshcalendar(yy mm+);return false" title="下一月">>></A></td></tr>;
s += <tr class="category"><td>日</td><td>一</td><td& gt;二</td><td>三</td><td>四</td><td> 五</td><td>六</td></tr>;
for(var i = ; i < ; i++) {
s += <tr class="altbg">;
for(var j = ; j <= ; j++)
s += "<td id=d" + (i * + j) + " height=\"\"></td>";
s += "</tr>";
}
s += <tr id="hourminute"><td colspan="" align="center"><input type="text" size="" value="" id="hour" onKeyUp=\thisvalue=thisvalue > ? : zerofill(thisvalue);controlidvalue=controlidvaluereplace(/\\d+(\:\\d+)/ig thisvalue+"$")\> 点 <input type="text" size="" value="" id="minute" onKeyUp=\thisvalue=thisvalue > ? : zerofill(thisvalue);controlidvalue=controlidvaluereplace(/(\\d+\:)\\d+/ig "$"+thisvalue)\> 分</td></tr>;
s += </table></div></div>;///
s += <div id="calendar_year" onclick="_cancelBubble(event)"><div class="col">;
for(var k = ; k <= ; k++) {
s += k != && k % == ? </div><div class="col"> : ;
s += <a href="#" onclick="refreshcalendar( + k + mm);$(\calendar_year\)styledisplay=\none\;return false"><span + (todaygetFullYear() == k ? class="today" : ) + id="calendar_year_ + k + "> + k + </span></a><br />;
}
s += </div></div>;
s += <div id="calendar_month" onclick="_cancelBubble(event)">;
for(var k = ; k <= ; k++) {
s += <a href="#" onclick="refreshcalendar(yy + (k ) + );$(\calendar_month\)styledisplay=\none\;return false"><span + (todaygetMonth()+ == k ? class="today" : ) + id="calendar_month_ + k + "> + k + ( k < ? : ) + 月</span></a><br />;
}
s += </div>;
var nElement = documentcreateElement("div");
nElementinnerHTML=s;
documentgetElementsByTagName("body")[]appendChild(nElement);
//documentwrite(s);
documentonclick = function(event) {
$(calendar)styledisplay = none;
$(calendar_year)styledisplay = none;
$(calendar_month)styledisplay = none;
}
$(calendar)onclick = function(event) {
_cancelBubble(event);
$(calendar_year)styledisplay = none;
$(calendar_month)styledisplay = none;
}
}
function parsedate(s) {
/(\d+)\(\d+)\(\d+)\s*(\d*):?(\d*)/exec(s);
var m = (RegExp$ && RegExp$ > && RegExp$ < ) ? parseFloat(RegExp$) : todaygetFullYear();
var m = (RegExp$ && (RegExp$ > && RegExp$ < )) ? parseFloat(RegExp$) : todaygetMonth() + ;
var m = (RegExp$ && (RegExp$ > && RegExp$ < )) ? parseFloat(RegExp$) : todaygetDate();
var m = (RegExp$ && (RegExp$ > && RegExp$ < )) ? parseFloat(RegExp$) : ;
var m = (RegExp$ && (RegExp$ > && RegExp$ < )) ? parseFloat(RegExp$) : ;
/(\d+)\(\d+)\(\d+)\s*(\d*):?(\d*)/exec(" \:");
return new Date(m m m m m);
}
function settime(d) {
$(calendar)styledisplay = none;
controlidvalue = yy + "" + zerofill(mm + ) + "" + zerofill(d) + (addtime ? + zerofill($(hour)value) + : + zerofill($(minute)value) : );
}
function showcalendar(event controlid addtime startdate enddate) {
controlid = controlid;
addtime = addtime;
startdate = startdate ? parsedate(startdate) : false;
enddate = enddate ? parsedate(enddate) : false;
currday = controlidvalue ? parsedate(controlidvalue) : today;
hh = currdaygetHours();
ii = currdaygetMinutes();
var p = getposition(controlid);
$(calendar)styledisplay = block;
$(calendar)styleleft = p[x]+px;
$(calendar)styletop = (p[y] + )+px;
_cancelBubble(event);
refreshcalendar(currdaygetFullYear() currdaygetMonth());
if(lastcheckedyear != false) {
$(calendar_year_ + lastcheckedyear)className = default;
$(calendar_year_ + todaygetFullYear())className = today;
}
if(lastcheckedmonth != false) {
$(calendar_month_ + lastcheckedmonth)className = default;
$(calendar_month_ + (todaygetMonth() + ))className = today;
}
$(calendar_year_ + currdaygetFullYear())className = checked;
$(calendar_month_ + (currdaygetMonth() + ))className = checked;
$(hourminute)styledisplay = addtime ? : none;
lastcheckedyear = currdaygetFullYear();
lastcheckedmonth = currdaygetMonth() + ;
}
function refreshcalendar(y m) {
var x = new Date(y m );
var mv = xgetDay();
var d = xgetDate();
var dd = null;
yy = xgetFullYear();
mm = xgetMonth();
$("year")innerHTML = yy;
$("month")innerHTML = mm + > ? (mm + ) : + (mm + );
for(var i = ; i <= mv; i++) {
dd = $("d" + i);
ddinnerHTML = " ";
ddclassName = "";
}
while(xgetMonth() == mm) {
dd = $("d" + (d + mv));
ddinnerHTML = <a href="###" onclick="settime( + d + );return false"> + d + </a>;
if(xgetTime() < todaygetTime() || (enddate && xgetTime() > enddategetTime()) || (startdate && xgetTime() < startdategetTime())) {
ddclassName = expire;
} else {
ddclassName = default;
}
if(xgetFullYear() == todaygetFullYear() && xgetMonth() == todaygetMonth() && xgetDate() == todaygetDate()) {
ddclassName = today;
ddfirstChildtitle = 今天;
}
if(xgetFullYear() == currdaygetFullYear() && xgetMonth() == currdaygetMonth() && xgetDate() == currdaygetDate()) {
ddclassName = checked;
}
xsetDate(++d);
}
while(d + mv <= ) {
dd = $("d" + (d + mv));
ddinnerHTML = " ";
d++;
}
if(addtime) {
$(hour)value = zerofill(hh);
$(minute)value = zerofill(ii);
}
}
function showdiv(id) {
var p = getposition($(id));
$(calendar_ + id)styleleft = p[x]+px;
$(calendar_ + id)styletop = (p[y] + )+px;
$(calendar_ + id)styledisplay = block;
}
function zerofill(s) {
var s = parseFloat(stoString()replace(/(^[\s]+)|(\s+$)/g ));
s = isNaN(s) ? : s;
return (s < ? : ) + stoString();
}
loadcalendar();
</script>
用 法演示<br>请选择日期<input name="memberbirth" type="text" value="" size="" readonly onclick="showcalendar(eventthis);" onfocus="showcalendar(event this);if(thisvalue==)thisvalue=">
</body>
</html>
