首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Js日期选择自动填充到输入框(界面漂亮兼容火狐)

Posted in Javascript onAugust 02, 2013 
<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"' : '') + ' id="calendar_year_' + k + '">' + k + '</span></a><br />'; 
} 
s += '</div></div>'; 
s += '<div id="calendar_month" onclick="_cancelBubble(event)">'; 
for(var k = 1; k <= 12; k++) { 
s += '<a href="#" onclick="refreshcalendar(yy, ' + (k - 1) + ');$(\'calendar_month\').style.display=\'none\';return false"><span' + (today.getMonth()+1 == k ? ' class="today"' : '') + ' id="calendar_month_' + k + '">' + k + ( k < 10 ? ' ' : '') + ' 月</span></a><br />'; 
} 
s += '</div>'; 
var nElement = document.createElement("div"); 
nElement.innerHTML=s; 
document.getElementsByTagName("body")[0].appendChild(nElement); 
//document.write(s); 
document.onclick = function(event) { 
$('calendar').style.display = 'none'; 
$('calendar_year').style.display = 'none'; 
$('calendar_month').style.display = 'none'; 
} 
$('calendar').onclick = function(event) { 
_cancelBubble(event); 
$('calendar_year').style.display = 'none'; 
$('calendar_month').style.display = 'none'; 
} 
} 
function parsedate(s) { 
/(\d+)\-(\d+)\-(\d+)\s*(\d*):?(\d*)/.exec(s); 
var m1 = (RegExp.$1 && RegExp.$1 > 1899 && RegExp.$1 < 2101) ? parseFloat(RegExp.$1) : today.getFullYear(); 
var m2 = (RegExp.$2 && (RegExp.$2 > 0 && RegExp.$2 < 13)) ? parseFloat(RegExp.$2) : today.getMonth() + 1; 
var m3 = (RegExp.$3 && (RegExp.$3 > 0 && RegExp.$3 < 32)) ? parseFloat(RegExp.$3) : today.getDate(); 
var m4 = (RegExp.$4 && (RegExp.$4 > -1 && RegExp.$4 < 24)) ? parseFloat(RegExp.$4) : 0; 
var m5 = (RegExp.$5 && (RegExp.$5 > -1 && RegExp.$5 < 60)) ? parseFloat(RegExp.$5) : 0; 
/(\d+)\-(\d+)\-(\d+)\s*(\d*):?(\d*)/.exec("0000-00-00 00\:00"); 
return new Date(m1, m2 - 1, m3, m4, m5); 
} 
function settime(d) { 
$('calendar').style.display = 'none'; 
controlid.value = yy + "-" + zerofill(mm + 1) + "-" + zerofill(d) + (addtime ? ' ' + zerofill($('hour').value) + ':' + zerofill($('minute').value) : ''); 
} 
function showcalendar(event, controlid1, addtime1, startdate1, enddate1) { 
controlid = controlid1; 
addtime = addtime1; 
startdate = startdate1 ? parsedate(startdate1) : false; 
enddate = enddate1 ? parsedate(enddate1) : false; 
currday = controlid.value ? parsedate(controlid.value) : today; 
hh = currday.getHours(); 
ii = currday.getMinutes(); 
var p = getposition(controlid); 
$('calendar').style.display = 'block'; 
$('calendar').style.left = p['x']+'px'; 
$('calendar').style.top = (p['y'] + 20)+'px'; 
_cancelBubble(event); 
refreshcalendar(currday.getFullYear(), currday.getMonth()); 
if(lastcheckedyear != false) { 
$('calendar_year_' + lastcheckedyear).className = 'default'; 
$('calendar_year_' + today.getFullYear()).className = 'today'; 
} 
if(lastcheckedmonth != false) { 
$('calendar_month_' + lastcheckedmonth).className = 'default'; 
$('calendar_month_' + (today.getMonth() + 1)).className = 'today'; 
} 
$('calendar_year_' + currday.getFullYear()).className = 'checked'; 
$('calendar_month_' + (currday.getMonth() + 1)).className = 'checked'; 
$('hourminute').style.display = addtime ? '' : 'none'; 
lastcheckedyear = currday.getFullYear(); 
lastcheckedmonth = currday.getMonth() + 1; 
} 
function refreshcalendar(y, m) { 
var x = new Date(y, m, 1); 
var mv = x.getDay(); 
var d = x.getDate(); 
var dd = null; 
yy = x.getFullYear(); 
mm = x.getMonth(); 
$("year").innerHTML = yy; 
$("month").innerHTML = mm + 1 > 9 ? (mm + 1) : '0' + (mm + 1); 
for(var i = 1; i <= mv; i++) { 
dd = $("d" + i); 
dd.innerHTML = " "; 
dd.className = ""; 
} 
while(x.getMonth() == mm) { 
dd = $("d" + (d + mv)); 
dd.innerHTML = '<a href="###" onclick="settime(' + d + ');return false">' + d + '</a>'; 
if(x.getTime() < today.getTime() || (enddate && x.getTime() > enddate.getTime()) || (startdate && x.getTime() < startdate.getTime())) { 
dd.className = 'expire'; 
} else { 
dd.className = 'default'; 
} 
if(x.getFullYear() == today.getFullYear() && x.getMonth() == today.getMonth() && x.getDate() == today.getDate()) { 
dd.className = 'today'; 
dd.firstChild.title = '今天'; 
} 
if(x.getFullYear() == currday.getFullYear() && x.getMonth() == currday.getMonth() && x.getDate() == currday.getDate()) { 
dd.className = 'checked'; 
} 
x.setDate(++d); 
} 
while(d + mv <= 42) { 
dd = $("d" + (d + mv)); 
dd.innerHTML = " "; 
d++; 
} 
if(addtime) { 
$('hour').value = zerofill(hh); 
$('minute').value = zerofill(ii); 
} 
} 
function showdiv(id) { 
var p = getposition($(id)); 
$('calendar_' + id).style.left = p['x']+'px'; 
$('calendar_' + id).style.top = (p['y'] + 16)+'px'; 
$('calendar_' + id).style.display = 'block'; 
} 
function zerofill(s) { 
var s = parseFloat(s.toString().replace(/(^[\s0]+)|(\s+$)/g, '')); 
s = isNaN(s) ? 0 : s; 
return (s < 10 ? '0' : '') + s.toString(); 
} 
loadcalendar(); 
</script> 
用法演示：<br>请选择日期：<input name="member.birth" type="text" value="2008-5-19" size="14" readonly onclick="showcalendar(event,this);" onfocus="showcalendar(event, this);if(this.value=='0000-00-00')this.value=''"> 
</body> 
</html>

Js日期选择自动填充到输入框(界面漂亮兼容火狐)

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
当滚动条滚动到页面底部自动加载增加内容的js代码
May 13 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
JavaScript中的类型检查
Feb 03 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
Oct 24 Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 #Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 #Javascript
js动态给table添加/删除tr的方法
Aug 02 #Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
Aug 02 #Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 #Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 #Javascript
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 #Javascript
证明书(326) 广播稿(323) 辞职信(98) 邀请函(127) 感言(394) 表扬信(62) 检讨书(456) 事迹材料(636) 方案(1080) 教学反思(909)
You might like
一个ftp类（ini.php）
2006/10/09 PHP
MYSQL环境变量设置方法
2007/01/15 PHP
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
13个PHP函数超实用
2015/10/21 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
layui实现数据分页功能（ajax异步）
2019/07/27 Javascript
javascript严格模式详解（含严格模式与非严格模式的区别）
2019/11/12 Javascript
Python实现判断一行代码是否为注释的方法
2018/05/23 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
Django 配置多站点多域名的实现步骤
2019/05/17 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
多个python文件调用logging模块报错误
2020/02/12 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
什么是测试驱动开发(TDD)
2012/02/15 面试题
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
酒店前厅员工辞职信
2014/01/08 职场文书
反腐倡廉标语
2014/06/24 职场文书
2015年教学工作总结
2015/04/02 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
反邪教学习心得体会
2016/01/15 职场文书
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电