繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 不错的一个日期输入 动态
- Javascript
- 用Javascript实现锚点(Anchor)间平滑跳转
- 实现png图片和png背景透明（支持多浏览器）的方法
- 一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
- 用DIV完美模拟createPopup 弹出窗口(修正版)，支持Firefox,ie,chrome
- JavaScript 中级笔记 第一章
- IE与Firefox在JavaScript上的7个不同写法小结
- MooTools 1.2介绍
- Mootools 1.2教程(2) DOM选择器
- Mootools 1.2教程(3) 数组使用简介
- 在IE下获取object（ActiveX）的Param的代码
- ExtJS 配置和表格控件使用
- javascript 缓冲效果实现代码 推荐
- html数组字符串拼接的最快方法
- JavaScript 浮动定位提示效果实现代码
- 类似CSDN图片切换效果脚本
- javascript 面向对象编程 function也是类
- javascript 面向对象编程 聊聊对象的事
- javascript 面向对象编程 function是方法(函数)
- [原创]基于innerHTML中的script广告实现代码[广告全部放在一个js里面]
- jQuery slider Content(左右控制移动)
Javascript 中的 不错的一个日期输入 动态
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 153 ::
收藏到网摘: n/a
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>日期控件</title>
<script>
var agt = navigator.userAgent.toLowerCase();
var OldTextBox;
function DateSeter(obj){
var parent=obj.parentNode;
var selYear=document.createElement('SELECT');
selYear.id='LoftyYear';
parent.insertBefore(selYear,obj);
var selMonth=document.createElement('SELECT');
selMonth.id='LoftyMonth';
parent.insertBefore(selMonth,obj);
var selDay=document.createElement('SELECT');
selDay.id='LoftyDay';
parent.insertBefore(selDay,obj);
var btnSubmit=document.createElement('BUTTON');
btnSubmit.style.width='22px';
parent.insertBefore(btnSubmit,obj);
btnSubmit.id='LoftyBtn';
for(s in btnSubmit)
{
//document.write(s+'<br />');
}
btnSubmit.textContent='OK';
btnSubmit.value='OK';
al(btnSubmit,'click','Restore()');
OldTextBox=obj;
parent.removeChild(obj);
var now=new Date();
var cYear=now.getFullYear();
SetCurrentYear(selYear,cYear);
al(selYear,'change','SetCurrentYear(document.getElementById(\'LoftyYear\'))');
al(selMonth,'change','SetDay(null,null)');
for(i=1;i<=12;i++)
{
var op=new Option(i,i);
selMonth.options.add(op);
}
var cMonth=now.getMonth()+1;
SetDay(cYear,cMonth);
selDay.selectedIndex=now.getDate()-1;
}
function Restore()
{
var yy=document.getElementById('LoftyYear');
var mm=document.getElementById('LoftyMonth');
var d=document.getElementById('LoftyDay');
var btn=document.getElementById('LoftyBtn');
var time=yy.options[yy.selectedIndex].value+'-'+mm.options[mm.selectedIndex].value+'-'+d.options[d.selectedIndex].value;
OldTextBox.value=time;
var parent=yy.parentNode;
parent.insertBefore(OldTextBox,yy);
parent.removeChild(yy);
parent.removeChild(mm);
parent.removeChild(d);
parent.removeChild(btn);
}
function SetDay(year,month)
{
if(year==null){
var yy=document.getElementById('LoftyYear');
var mm=document.getElementById('LoftyMonth');
year=Math.round(yy.options[yy.selectedIndex].value);
month=Math.round(mm.options[mm.selectedIndex].value);
}
var date=new Date(year,month,1);
date.setDate(0);
var maxdate=date.getDate();
var obj=document.getElementById('LoftyDay');
var seldate=obj.selectedIndex;
if(obj.options.length>0){
if(Math.round(obj.options[obj.selectedIndex].value)>maxdate)
{
seldate=maxdate-1;
}
}
reAppendSelect(obj,1,maxdate,seldate+1);
}
function SetCurrentYear(selecter,currYear)
{
if(currYear==null){
currYear=Math.round(selecter.options[selecter.selectedIndex].value);
}
reAppendSelect(selecter,currYear-10,currYear+10,currYear);
}
function reAppendSelect(selecter,startIndex,endIndex,selIndex)
{
while(selecter.options.length>0)
{
selecter.removeChild(selecter.options[selecter.options.length-1]);
}
for(i=startIndex;i<=endIndex;i++)
{
var op=new Option(i,i);
selecter.options.add(op);
op.selected=(selIndex==i);
}
}
function al(obj,lissener,func){
if(agt.indexOf('firefox')!=-1){
obj.addEventListener(lissener,function(){eval(func);},false);
}else{
obj.attachEvent('on'+lissener,function(){eval(func);});
}
}
</script>
</head>
<body>
<input onclick="DateSeter(this);" />
</body>
</html>
精简只有年:
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>日期控件</title>
<script>
var agt = navigator.userAgent.toLowerCase();
var OldTextBox;
function DateSeter(obj){
var parent=obj.parentNode;
var selYear=document.createElement('SELECT');
selYear.id='LoftyYear';
parent.insertBefore(selYear,obj);
/*
var btnSubmit=document.createElement('BUTTON');
btnSubmit.style.width='32px';
parent.insertBefore(btnSubmit,obj);
btnSubmit.id='LoftyBtn';
btnSubmit.textContent='OK';
btnSubmit.value='OK';
al(btnSubmit,'click','Restore()');
*/
OldTextBox=obj;
parent.removeChild(obj);
var defaultValue = obj.value;
var now=new Date();
var cYear=now.getFullYear();
SetCurrentYear(selYear,cYear,defaultValue);
al(selYear,'change','Restore(obj)');
}
function Restore()
{
OldTextBox.value = arguments[0].value;
var yy=document.getElementById('LoftyYear');
var parent=yy.parentNode;
parent.insertBefore(OldTextBox,yy);
parent.removeChild(yy);
/*
var yy=document.getElementById('LoftyYear');
var btn=document.getElementById('LoftyBtn');
var time=yy.options[yy.selectedIndex].value;
OldTextBox.value=time;
var parent=yy.parentNode;
parent.insertBefore(OldTextBox,yy);
parent.removeChild(yy);
parent.removeChild(btn);
*/
}
function SetCurrentYear(selecter,currYear)
{
if(currYear==null){
currYear=Math.round(selecter.options[selecter.selectedIndex].value);
}
var dv = arguments[2];
reAppendSelect(selecter,1901,2001,currYear,dv);
}
function reAppendSelect(selecter,startIndex,endIndex,selIndex)
{
while(selecter.options.length>0)
{
selecter.removeChild(selecter.options[selecter.options.length-1]);
}
for(i=startIndex;i<=endIndex;i++)
{
var op=new Option(i,i);
selecter.options.add(op);
if(arguments[4]!=""){
if(i==arguments[4])
op.selected=true;
}else{
if (i==endIndex)
op.selected=true;
}
}
}
function al(obj,lissener,func){
if(agt.indexOf('firefox')!=-1){
obj.addEventListener(lissener,function(){eval(func);},false);
}else{
obj.attachEvent('on'+lissener,function(){eval(func);});
}
}
</script>
</head>
<body>
<input onclick="DateSeter(this);" />
</body>
</html>
评论 (0) All
