菜单

Firefox的日历控件,Js日期选择自动填充到输入框

2019年8月2日 - 前端排行

复制代码 代码如下:

<html>
<head>
<title>日期输入框演示-queyang.com</title>
<meta http-equiv=”Content-Type” content=”text/html;
charset=gb2312″>script
<style>
body{font-size:12px;font-family:Verdana,Arial,”宋体”;}
a:link {color:#464646;text-decoration:none;}
a:visited {color:#464646;text-decoration:none;}iframe
a:hover{color:#ed145b;text-decoration:underline;}
a:active{color:#ed145b;text-decoration:underline;}
td{font-size:12px}
/*想要改输入日历控件的样子就改下面的CSS样式就可以了*/
/*Date*/
.header {font: 12px Arial, Tahoma !important;font-weight: bold
!important;font: 11px Arial, Tahoma;font-weight: bold;color:
#154BA0;background:#C2DEED;height: 25px;padding-left: 10px;
}
.header td {padding-left: 10px;}
.header a {color: #154BA0;}
.header input {background:none;vertical-align: middle;height: 16px;}
.category {font: 12px Arial, Tahoma !important;font: 11px Arial,
Tahoma;color: #92A05A;height:20px;background-color: #FFFFD9;}
.category td {border-bottom: 1px solid #DEDEB8;}
.expire, .expire a:link, .expire a:visited {color: #999999;}
.default, .default a:link, .default a:visited {color: #000000;}
.checked, .checked a:link, .checked a:visited {color: #FF0000;}
.today, .today a:link, .today a:visited {color: #00BB00;}
#calendar_year {display: none;line-height: 130%;background:
#FFFFFF;position: absolute;z-index: 10;}
#calendar_year .col {float: left;background: #FFFFFF;margin-left:
1px;border: 1px solid #86B9D6;padding: 4px;}
#calendar_month {display: none;background: #FFFFFF;line-height:
130%;border: 1px solid #86B9D6;padding: 4px;position: absolute;z-index:
11;}
.tableborder {background: white;border: 1px solid #86B9D6;}
#year,#month{padding-right:10px;background:url(attachments/month_0701/8200714125245.gif)
no-repeat center right;}/*图片路径可以改成自己的*/
/*Date*/
</style>
<script>
//这段脚本如果你的页面里有,就可以去掉它们了
//欢迎访问我的网站queyang.com
var ie =navigator.appName==”Microsoft Internet Explorer”?true:false;
function $(objID){
 return document.getElementById(objID);
}
</script>
</head>
<body>
<!–记得哦,下面的代码得放在Body标签里,当然,放在页面最后面也可以(不过有可能会出现JS还未加载完毕时用户点击了下面的输入框,这样页面就会出错了。)–>
<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 : window.event ;
 if(ie) {
  e.cancelBubble = true;
 } else {
  e.stopPropagation();
 }
}
function getposition(obj) {
 var r = new Array();
 r[‘x’] = obj.offsetLeft;
 r[‘y’] = obj.offsetTop;
 while(obj = obj.offsetParent) {
  r[‘x’] += obj.offsetLeft;
  r[‘y’] += obj.offsetTop;
 }
 return r;
}
function loadcalendar() {
 s = ”;
 s += ‘<div id=”calendar” style=”display:none; position:absolute;
z-index:9;” onclick=”_cancelBubble(event)”>’;
 if (ie)
 {
  s += ‘<iframe width=”200″ height=”160″ src=”about:blank”
style=”position: absolute;z-index:-1;”></iframe>’;
 }
 s += ‘<div style=”width: 200px;”><table class=”tableborder”
cellspacing=”0″ cellpadding=”0″ width=”100%” style=”text-align:
center”>’;
 s += ‘<tr align=”center” class=”header”><td
class=”header”><a href=”#” onclick=”refreshcalendar(yy,
mm-1);return false”
title=”上一月”><<</a></td><td colspan=”5″
style=”text-align: 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+1);return false”
title=”下一月”>>></A></td></tr>’;
 s += ‘<tr
class=”category”><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>’;
 for(var i = 0; i < 6; i++) {
  s += ‘<tr class=”altbg2″>’;
  for(var j = 1; j <= 7; j++)
   s += “<td id=d” + (i * 7 + j) + ”
height=\”19\”>0</td>”;
  s += “</tr>”;
 }
 s += ‘<tr id=”hourminute”><td colspan=”7″
align=”center”><input type=”text” size=”1″ value=”” id=”hour”
onKeyUp=\’this.value=this.value > 23 ? 23 :
zerofill(this.value);controlid.value=controlid.value.replace(/\\d+(\:\\d+)/ig,
this.value+”$1″)\’> 点 <input type=”text” size=”1″ value=””
id=”minute” onKeyUp=\’this.value=this.value > 59 ? 59 :
zerofill(this.value);controlid.value=controlid.value.replace(/(<a
href=”file://\\d+\:)\\d+/ig”>\\d+\:)\\d+/ig</a>,
“$1″+this.value)\’> 分</td></tr>’;
 s += ‘</table></div></div>’;
 s += ‘<div id=”calendar_year”
onclick=”_cancelBubble(event)”><div class=”col”>’;
 for(var k = 1930; k <= 2019; k++) {
  s += k != 1930 && k % 10 == 0 ? ‘</div><div class=”col”>’
: ”;
  s += ‘<a href=”#” onclick=”refreshcalendar(‘ + k + ‘,
mm);$(\’calendar_year\’).style.display=\’none\’;return
false”><span’ + (today.getFullYear() == k ? ‘ class=”today”‘ : ”)

<html>
<head>
<title>很漂亮、兼容火狐的Js日期选择,自动填充到输入框</title>
<meta http-equiv=”content-Type”
content=”text/html;charset=gb2312″>
<style type=”text/css”>
body{font-size:12px;font-family:Verdana,Arial,”宋体”;}
a:link {color:#464646;text-decoration:none;}
a:visited {color:#464646;text-decoration:none;}
a:hover{color:#ed145b;text-decoration:underline;}
a:active{color:#ed145b;text-decoration:underline;}
td{font-size:12px}
/*/*/
/*DateCSS样式*/
.header {font: 12px Arial, Tahoma !important;font-weight: bold
!important;font: 11px Arial, Tahoma;font-weight: bold;color:
#154BA0;background:#C2DEED;height: 25px;padding-left: 10px;
}
.header td {padding-left: 10px;}
.header a {color: #154BA0;}
.header input {background:none;vertical-align: middle;height: 16px;}
.category {font: 12px Arial, Tahoma !important;font: 11px Arial,
Tahoma;color: #92A05A;height:20px;background-color: #FFFFD9;}
.category td {border-bottom: 1px solid #DEDEB8;}
.expire, .expire a:link, .expire a:visited {color: #999999;}
.default, .default a:link, .default a:visited {color: #000000;}
.checked, .checked a:link, .checked a:visited {color: #FF0000;}
.today, .today a:link, .today a:visited {color: #00BB00;}
#calendar_year {display: none;line-height: 130%;background:
#FFFFFF;position: absolute;z-index: 10;}
#calendar_year .col {float: left;background: #FFFFFF;margin-left:
1px;border: 1px solid #86B9D6;padding: 4px;}
#calendar_month {display: none;background: #FFFFFF;line-height:
130%;border: 1px solid #86B9D6;padding: 4px;position: absolute;z-index:
11;}
.tableborder {background: white;border: 1px solid #86B9D6;}
#year,#month{padding-right:10px;}
</style>
<script language=”javascript”>
//下面的代码段如果你页面里有,可以去掉
var ie =navigator.appName==”Microsoft Internet Explorer”?true:false;
function $(objID){
return document.getElementById(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 : window.event ;
if(ie) {
e.cancelBubble = true;
} else {
e.stopPropagation();
}
}
function getposition(obj) {
var r = new Array();
r[‘x’] = obj.offsetLeft;
r[‘y’] = obj.offsetTop;
while(obj = obj.offsetParent) {
r[‘x’] += obj.offsetLeft;
r[‘y’] += obj.offsetTop;
}
return r;
}
function loadcalendar() {
s = ”;
s += ‘<div id=”calendar” style=”display:none; position:absolute;
z-index:9;” onclick=”_cancelBubble(event)”>’;
if (ie)
{
s += ‘<iframe width=”200″ height=”160″ src=”about:blank”
style=”position: absolute;z-index:-1;”></iframe>’;
}
s += ‘<div style=”width: 200px;”><table class=”tableborder”
cellspacing=”0″ cellpadding=”0″ width=”100%” style=”text-align:
center”>’;
///
s += ‘<tr align=”center” class=”header”><td
class=”header”><a href=”#” onclick=”refreshcalendar(yy,
mm-1);return false”
title=”上一月”><<</a></td><td colspan=”5″
style=”text-align: 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+1);return false”
title=”下一月”>>></A></td></tr>’;
s += ‘<tr
class=”category”><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>’;
for(var i = 0; i < 6; i++) {
s += ‘<tr class=”altbg2″>’;
for(var j = 1; j <= 7; j++)
s += “<td id=d” + (i * 7 + j) + ”
height=\”19\”>0</td>”;
s += “</tr>”;
}
s += ‘<tr id=”hourminute”><td colspan=”7″
align=”center”><input type=”text” size=”1″ value=”” id=”hour”
onKeyUp=\’this.value=this.value > 23 ? 23 :
zerofill(this.value);controlid.value=controlid.value.replace(/\\d+(\:\\d+)/ig,
this.value+”$1″)\’> 点 <input type=”text” size=”1″ value=””
id=”minute” onKeyUp=\’this.value=this.value > 59 ? 59 :
zerofill(this.value);controlid.value=controlid.value.replace(/(\\d+\:)\\d+/ig,
“$1″+this.value)\’> 分</td></tr>’;
s += ‘</table></div></div>’;///
s += ‘<div id=”calendar_year”
onclick=”_cancelBubble(event)”><div class=”col”>’;
for(var k = 1930; k <= 2019; k++) {
s += k != 1930 && k % 10 == 0 ? ‘</div><div class=”col”>’ :
”;
s += ‘<a href=”#” onclick=”refreshcalendar(‘ + k + ‘,
mm);$(\’calendar_year\’).style.display=\’none\’;return
false”><span’ + (today.getFullYear() == k ? ‘ class=”today”‘ : ”)

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图