首页
所有分类
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 相关文章推荐
javascript removeChild 使用注意事项
Apr 11 Javascript
javascript中的作用域scope介绍
Dec 28 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
Jquery Easyui对话框组件Dialog使用详解（14）
Dec 19 Javascript
vue Render中slots的使用的实例代码
Jul 19 Javascript
vue-cli中的webpack配置详解
Sep 25 Javascript
webpack多页面开发实践
Dec 18 Javascript
javascript获取select值的方法完整实例
Jun 20 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值，数据同步
Jul 13 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 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
harbor(1) Tablespace(1) commit(1) 分布式锁(3) pytz(1) procedure(1) 内置函数(1) GoFrame(3) 自定义函数(1) Navicat(1)
You might like
如何利用php+mysql保存和输出文件
2006/10/09 PHP
php5.5新数组函数array_column使用
2013/07/08 PHP
php操作MongoDB基础教程（连接、新增、修改、删除、查询）
2014/03/25 PHP
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
php之readdir函数用法实例
2014/11/13 PHP
php实现的IMEI限制的短信验证码发送类
2015/05/05 PHP
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
高性能JavaScript模板引擎实现原理详解
2015/02/05 Javascript
简述JavaScript提交表单的方式 （Using JavaScript Submit Form）
2016/03/18 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
jQuery实现单击按钮遮罩弹出对话框效果（1）
2017/02/20 Javascript
ECMAScript6--解构
2017/03/30 Javascript
基于Vue实现后台系统权限控制的示例代码
2017/08/29 Javascript
javascript 缓冲运动框架的实现
2017/09/29 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
详解python UDP 编程
2020/08/24 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
Foot Locker德国官方网站：美国运动服和鞋类零售商
2018/11/01 全球购物
乌克兰第一的珠宝网上商店：Gold.ua
2019/11/29 全球购物
美国在线和移动免费会员制批发零售商：Boxed（移动端的Costco）
2020/01/02 全球购物
Nike俄罗斯官方网站：Nike RU
2021/03/05 全球购物
项目投资合作意向书
2014/07/29 职场文书
英语复习计划
2015/01/19 职场文书
委托书格式范文
2015/01/28 职场文书