日期控件 （JavaScript）

最新推荐文章于 2015-04-21 16:45:09 发布
最新推荐文章于 2015-04-21 16:45:09 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript calendar function date border button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/NicholasMeng/article/details/430894
版权 
如果需要完整文件可以点击下面的链接下载.
Calendar.txt 下载后改名为 Calendar.js
CalendarDemo.txt 改名为 Calendar.htm 
用浏览器打开Calendar.htm 即可.(暂时只支持 IE 浏览器, FireFox显示出来后无法选择年月.)
希望大家多提意见 ：）
下面是我自己写的日期控件--Calendar.js 文件内容.
/*
	Auther: 	Nicholas.Meng
	Date: 	    2005-07-17
	Version:    1.01
	
	控件上用到的颜色都作为变量放在前面,可以根据自己需要修改.
	设计思想:
        为每个需要日期控件的输入框加一个它自己的日期控件,即一个<Div></Div>.
        刚创建的时候只赋上id,class等值,并且把它的位置固定在输入框的下方。这是日期控件只是一个空白层。
        显示的时候只向其中填内容而不需要再调整日期控件的位置。
        有效的避免了当浏览器窗口大小改变之后，使用getBoundingClientRect()只能得到控件相对位置,导致的日期控件错位的问题. 
        并且就算用户没有点击按钮显示出日期控件.也只是增加了一个隐藏的空白层而已. 
    
    如何调用:
        首先，使用日期控件的文本框一定要赋上id 和 name 并且在网页中均不可重复。
            主要方法：showCalendar( 文本框 ， 日期控件的id );
            例如：
            <input type="text" id="txtDateFrom" name="txtDateFrom">
            <input type='Button' name="btnSchDaFr" οnclick="showCalendar( txtDateFrom , 'dcDateFrom')">            
            
        之后，在网页代码的最末端加上如下代码：
            <script>
              createNewDiv( document.getElementById( 'txtDateFrom') , 'dcDateFrom' );
            </script>
            
   Tips:
        1.当需要多个日期控件时,所有的日期控件的 id 在网页中均不能重复.        
        2.所有的日期控件DIV 都属于 Calendar class.
            可以在网页的<Style></Style>中做出字体等设置,例如:
            <style>
              .Calendar
              {
               font-size:12px;
               font-family:"Arial","sans-serif";
              }
            </style> 
*/

var iCalendarHeight = 150;
var iCalendarWidth = 250;
var iBonder = 5;
var iMinYear = 1900;
var iMaxYear = 2200;
var iDaysPerPage = 42;
var isHid = true;
var sYearMthBgColor = '#395592';
var sYearMthFontColor = '#FFFFFF'
var sTabDateBgColor = '#CCCCCC';
var sTabTrWeekBgColor = '#F5F5F5';
var sTabTrDateBgColor = '#FFFFFF';
var sTabTdMouseOverColor= '#E1E1E1';
var sTabTdMouseOutColor = '#FFFFFF';
var sSelectedBgColor = '#420042';
var sNotSelectedFontColor = '#000000';
var sSundayFontColor = '#FF0000';
var sSaturdayFontColor = '#FF0000';
var sTabTdPrevAndNextFontColor = '#BBBBBB';
var sTabTodayBgColor = '#F5F5F5';
var sTabTodayLableFontColor = '#FF0000';

var arrDisplayedCalendars = new Array();

function createNewDiv( inputBox , sCalendarID )
{
    document.writeln( '<Div id='+ sCalendarID +' name= '+ sCalendarID +' class="Calendar" Author=Nick_For_His_Wife  scrolling="no" frameborder=0 style="border:0px solid #EEEEEE ;position: absolute; width: '+iCalendarWidth+'; height: '+iCalendarHeight+'; z-index: 0 ; filter :/'progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#AAAAAA,strength='+iBonder+')/' ; display: none"></Div>' );  
    positionDiv( inputBox , sCalendarID ) ; 
}

function positionDiv( inputBox , sCalendarID)
{
    var FrLeft,FrTop,WinWidth,WinHeight;
    
    Winw=document.body.offsetWidth;
    Winh=document.body.offsetHeight;
    FrLeft = inputBox.getBoundingClientRect().left-2;
    FrTop = inputBox.getBoundingClientRect().top + inputBox.clientHeight;
    
    calendar = document.getElementById( sCalendarID );
    calendar.style.left = FrLeft;
    calendar.style.top = FrTop;
}

function getToday()
{
	return new Date();
}

function getDateFormat( dDate )
{
	var iYear = dDate.getFullYear();
	var iMth = ( dDate.getMonth() + 1 );
	var iDay = dDate.getDate();
	
	if ( iMth < 10 )
	{
		iMth = '0' + iMth;
	}
	
	if ( iDay < 10 )
	{
		iDay = '0' + iDay;	
	}
	
	return iYear + '-' + iMth + '-' + iDay;
}

function isLeapYear( iYear )
{
	 if ((iYear%400==0) || ((iYear%4==0) && (iYear%100!=0)))
		 return true;
	 else
	 	return false;	
}

function getFitDate( iYear , iMth , iDay )
{
	var iActualMth = iMth + 1;
	// Not February
    if  ( iActualMth != 2 )  
	{
		if (( iDay == 31 )&&(( iActualMth == 4 )||( iActualMth == 6 )||( iActualMth == 9 )||( iActualMth == 11 )))	
		{
			dNewDay = new Date( iYear , iMth , ( iDay - 1 ) );
			return dNewDay;
		}
		else
		{
			dNewDay = new Date( iYear , iMth , iDay );
			return dNewDay;
		}				
	}
	// Is February
	if ( iDay < 29 )
	{
		dNewDay = new Date( iYear , iMth , iDay );
		return dNewDay;	
	}
    // Leap Year	
	if  ( isLeapYear( iYear ) )
	{
		dNewDate = new Date( iYear , iMth , 29);
		return dNewDate;	
	} 
	// Not Leap Year
	dNewDate = new Date( iYear , iMth , 28);
	return dNewDate; 	
}

function getNextYear( calendar , inputBox , iYear , iMth , iDay )
{
    if ( ( iYear + 1 ) > iMaxYear ) 
	{
		dCurrDate = getFitDate( iMinYear , iMth , iDay );
	}
	else
	{
        dCurrDate = getFitDate( ( iYear + 1 ) , iMth , iDay );
    }
    
	displayCalendarFrame( calendar , inputBox , dCurrDate );
}	

function getPreviousYear( calendar , inputBox , iYear , iMth , iDay )
{
	if  ( ( iYear - 1 ) < iMinYear )
	{
		dCurrDate = getFitDate( inputBox , iMaxYear , iMth , iDay );
	}
	else
	{
	  dCurrDate = getFitDate( ( iYear - 1 ) , iMth , iDay );
    } 
    
	displayCalendarFrame( calendar , inputBox , dCurrDate );
}

function getNextMonth( calendar , inputBox , iYear , iMth , iDay )
{
    if ( ( iMth + 1 ) >  11 )
	{
		dCurrDate = getNextYear( calendar , inputBox , iYear , 0 , iDay );
		return; 
	}
	else
	{
        dCurrDate = getFitDate( iYear , (iMth + 1) , iDay);
    }
    
	displayCalendarFrame( calendar , inputBox , dCurrDate );
}

function getPreviousMonth( calendar , inputBox , iYear , iMth , iDay )
{
    if ( ( iMth - 1 ) < 0 )
	{
		dCurrDate = getPreviousYear( calendar , inputBox , iYear , 11 , iDay );	
		return; 
	}	
	else
	{
    dCurrDate = getFitDate( iYear , (iMth - 1) , iDay );
    }
    
	displayCalendarFrame( calendar , inputBox , dCurrDate );	
}

function getMonthDaysNum( iYear , iMth )
{
	/* 
    这样使用Date构造不知道是不是利用了JavaScript的bug.
    不过用现在的方法就可以得到每个月的正确天数. 
	*/
    return ( new Date( iYear , iMth , 0).getDate() );	
}

function getAllDays( iYear , iMth )
{
	arrAllDays = new Array();
	dFirstDay = new Date( iYear , iMth , 1 );
	
	var iWeekDay = dFirstDay.getDay();
	if ( iWeekDay != 0 ) 
	{
        switch( iWeekDay )
        {
    		case 6 : arrAllDays.push( 0 ); 
    		case 5 : arrAllDays.push( 0 ); 
    		case 4 : arrAllDays.push( 0 ); 
    		case 3 : arrAllDays.push( 0 ); 
    		case 2 : arrAllDays.push( 0 ); 
    		case 1 : arrAllDays.push( 0 );
    	}
    }
    
	var iMthDaysNum = getMonthDaysNum( iYear , (iMth + 1) );
	for (var i = 0 ; i < iMthDaysNum ; i++ )
	{
		arrAllDays.push( i + 1 );	
	}
	
	var iArrLen = arrAllDays.length;
	for( var i=iArrLen ;  i < iDaysPerPage ;  i++  )
	{
	    arrAllDays.push( 0 );  
	}	
	
	return arrAllDays;		
}

function getValidDate( sDate )
{
	arrDate = sDate.split( "-" );
	if ( arrDate.length != 3 ) // if it is not valid format return today 
	{
		return new Date();
	}
	
	var iYear =  arrDate[0]
	var iMth = arrDate[1];
	var iDay = arrDate[2];
	
	return getFitDate( iYear , (iMth-1) , iDay);
}

function showCalendar( inputBox , sCalendarID  )
{
	closeAllDisplayedCalendar();
    addCalenderDisplay( sCalendarID ); 
    var sName = inputBox.name;
	var sValue = inputBox.value;
	calendar = document.getElementById( sCalendarID );
	dCurrDate = getValidDate( sValue );
	displayCalendarFrame( calendar , inputBox , dCurrDate );
	isHid = false;
}

function displayCalendarFrame( calendar , inputBox , dCurrDate )
{
    var FrameText;
    var FrLeft,FrTop,WinWidth,WinHeight;    
    var iYear = dCurrDate.getFullYear();
    var iMth = dCurrDate.getMonth();
    var iDay = dCurrDate.getDate();

    arrAllDays = getAllDays( iYear , iMth );
    
    frameText="/n<table onselectstart=/"return false;/" border='0' cellpadding='0' cellspacing='0' bgcolor=/'"+ sYearMthBgColor+"/' width='100%' height='15' style=/"color:/'"+ sYearMthFontColor +"/';font-weight:bolder;border:0px solid/">"+"/n<tr>/n";
    frameText+="<td width=8>";
    frameText+="<input type='Button' value='&lt;&lt;' width='8' height='11' border='0' style='cursor:hand' οnclick=/"parent.getPreviousYear(window.parent.document.all."+ calendar.name +", window.parent.document.all." + inputBox.name + "," + iYear + "," + iMth + "," + iDay + ")/">";
    frameText+="</td>/n";
    frameText+="<td vAlign=middle align='center'>";
    frameText+=iYear;
    frameText+="</td>/n";
    frameText+="<td width=8>";
    frameText+="<input type='Button' value='&gt;&gt;' width='8' height='11' border='0' style='cursor:hand' οnclick=/"parent.getNextYear(window.parent.document.all."+ calendar.name +", window.parent.document.all."+ inputBox.name + "," + iYear + "," + iMth + "," + iDay + ")/">";
    frameText+="</td>/n";
    frameText+="<td width=8>";
    frameText+="<input type='Button' value='&lt;' width='8' height='11' border='0' style='cursor:hand' οnclick=/"parent.getPreviousMonth(window.parent.document.all."+ calendar.name +", window.parent.document.all."+inputBox.name+"," + iYear + "," + iMth + "," + iDay + ")/">";
    frameText+="</td>/n";
    frameText+="<td vAlign=middle align='center' width='50'>";
    frameText+=( iMth + 1 );
    frameText+="</td>/n";
    frameText+="<td width=8>";
    frameText+="<input type='Button' value='&gt;' width='8' height='11' border='0' style='cursor:hand' οnclick=/"parent.getNextMonth (window.parent.document.all."+ calendar.name +", window.parent.document.all." + inputBox.name + "," + iYear + "," + iMth + "," + iDay + ")/">";
    frameText+="</td>"+"/n";
    frameText+="</tr>"+"/n";
    frameText+="</table>"+"/n";
    frameText+="<table onselectstart=/"return false;/" border='0' cellpadding='0' cellspacing='1' width='100%' bgcolor='"+sTabDateBgColor+"'>"+"/n";
    frameText+="<tr bgcolor="+ sTabTrWeekBgColor +">"+"/n";
    frameText+="<td><center><font color="+sSundayFontColor+">Sun</font></center></td>"+"/n";
    frameText+="<td><center>Mon</center></td>"+"/n";
    frameText+="<td><center>Tue</center></td>"+"/n";
    frameText+="<td><center>Wed</center></td>"+"/n";
    frameText+="<td><center>Thu</center></td>"+"/n";
    frameText+="<td><center>Fri</center></td>"+"/n";
    frameText+="<td><center><font color="+sSaturdayFontColor+">Sat</center></td>"+"/n";
    frameText+="</tr>"+"/n";
      
    var arrDaysLength = arrAllDays.length;
    var sValue = 0;

    for( var i=0 ; i < arrDaysLength ; i+=7 )
    {      
        frameText+="<tr bgcolor="+sTabTrDateBgColor+">"+"/n";
        for( var iCol = 0 ; iCol < 7 ; iCol++ )
        {
            sValue = arrAllDays[ i + iCol ];
            if ( sValue == 0 )   // Previous or Next Month Day.
            {
                frameText+= "<td width=35><center><font color="+sTabTdPrevAndNextFontColor+">"+"."+"</font></center></td>"+"/n"
                continue;  
            }
            sValue = sValue - 0;
            if ( sValue == iDay )  // selected Date
            { 
                frameText+="<td width=35 style=/"background:"+sSelectedBgColor+";cursor:hand/" onClick=/"parent.outputValue(window.parent.document.all."+inputBox.name+","+ iYear +","+ iMth +","+ sValue +");parent.closeCalendar(window.parent.document.all." + calendar.name + ");/"><center><font color='#FFFFFF'>"+sValue+"</font></center></td>"+"/n";
                continue;  
            }
            // current month not select days.
            if ( iCol == 0 ) // Sunday
            {
                frameText+="<td width=35 style=/"cursor:hand/" onMouseOver=/"this.style.background=/'"+ sTabTdMouseOverColor +"/'/" onMouseOut=/"this.style.background=/'"+sTabTdMouseOutColor+"/'/" onClick=/"parent.outputValue(window.parent.document.all."+inputBox.name+","+ iYear +","+ iMth +","+ sValue +");parent.closeCalendar(window.parent.document.all." + calendar.name + ");/"><center><font color="+sSundayFontColor+">"+sValue+"</font></center></td>"+"/n";
                continue;                                   
            }
            if ( iCol == 6 ) // Saturday
            {
                frameText+="<td width=35 style=/"cursor:hand/" onMouseOver=/"this.style.background=/'"+ sTabTdMouseOverColor+"/'/" onMouseOut=/"this.style.background=/'"+sTabTdMouseOutColor+"/'/" onClick=/"parent.outputValue(window.parent.document.all."+inputBox.name+","+ iYear +","+ iMth +","+ sValue +");parent.closeCalendar(window.parent.document.all." + calendar.name + ");/"><center><font color="+ sSaturdayFontColor+">"+sValue+"</font></center></td>"+"/n";
                continue;                                   
            } 
            frameText+="<td width=35 style=/"cursor:hand/" onMouseOver=/"this.style.background=/'"+sTabTdMouseOverColor+"/'/" onMouseOut=/"this.style.background=/'"+sTabTdMouseOutColor+"/'/" onClick=/"parent.outputValue(window.parent.document.all."+inputBox.name+","+ iYear +","+ iMth +","+ sValue +");parent.closeCalendar(window.parent.document.all." + calendar.name + ");/"><center><font color=/'"+sNotSelectedFontColor+"/'>"+sValue+"</font></center></td>"+"/n";                       
        }    
    }
    frameText+="</tr>"+"/n";
    frameText+="</table>"+"/n";
    frameText+="<table onselectstart=/"return false;/" cellpadding='0' cellspacing='0' bgcolor="+ sTabTodayBgColor +" width='100%' height='15'>"+"/n<tr>/n";
    dToday = getToday();
    var iTodayYear = dToday.getFullYear();
    var iTodayMth = dToday.getMonth();
    var iTodayDay = dToday.getDate();
    var sToday = getDateFormat( dToday );
    frameText+="<td width=/'" + iCalendarWidth + "/' title=/"Today: "+ sToday+"/" style=/"cursor:hand/" οnclick=/"parent.outputValue(window.parent.document.all."+inputBox.name+ "," + iTodayYear + "," + iTodayMth + "," + iTodayDay  +");parent.closeCalendar(window.parent.document.all." + calendar.name + ");/">";
    frameText+="<font color="+sTabTodayLableFontColor+">Today: </font>"+sToday;
    frameText+="</td>/n";
    frameText+="<td>";
    frameText+="<input type='Button'  width='100%' border='0' value='x' style='cursor:hand' οnclick=/"parent.closeCalendar(window.parent.document.all." + calendar.name + ");/">";
    frameText+="</td>/n";
    frameText+="</tr>/n";
    calendar.innerHTML = frameText;
    calendar.style.display="";
}

function addCalenderDisplay( sCalendarID )
{   
    var iArrLength = arrDisplayedCalendars.length;
    if ( iArrLength ==0 )
    {
        arrDisplayedCalendars.push( sCalendarID );
        return;
    }
    
    var sValue;
    for( var i=0 ; i < iArrLength ; i++  )
    {
        sValue = arrDisplayedCalendars[ i ];
        if ( sValue == sCalendarID )
        {
            return;
        }
    }
    arrDisplayedCalendars.push( sCalendarID ); 
}

function removeCalendarDisplay( sCalendarID )
{
    var iArrLength = arrDisplayedCalendars.length;
    if ( iArrLength == 0 )
    {
        return;
    }
    
    var sValue;
    for( var i=0 ; i < iArrLength ; i++ )
    {
        sValue = arrDisplayedCalendars[ i ];
        if ( sValue == sCalendarID )
        {
            arrDisplayedCalendars.splice( i , 1 );
            return;
        }
    }
}

function outputValue( inputBox , iYear , iMth , iDay )
{    
    dCurrDate = new Date( iYear , iMth , iDay );
    inputBox.value = getDateFormat( dCurrDate );
}

function closeCalendar( calendar )
{ 	
    calendar.style.display="none";
    removeCalendarDisplay( calendar.id );
}

function closeAllDisplayedCalendar()
{
    if (isHid)
    {
        var iArrLength = arrDisplayedCalendars.length;
        if ( iArrLength == 0 )
        {
            return;
        }
        
        var sValue;
        for ( var i=0 ; i < iArrLength ; i++ )
        {
            sValue = arrDisplayedCalendars[ i ];
            calendar = document.getElementById( sValue );
            if ( calendar != null )
            {
                calendar.style.display = "none";
                arrDisplayedCalendars.splice( i , 1 );
            }
        }    
    }   
    isHid = true;
}

// click other side of current web page will close calendar. 
document.onclick = closeAllDisplayedCalendar;
Javascript－日期控件
小李专栏
11-11 3210
// 日期控件“popcalendar.js” var fixedX = -1   // x position (-1 if to appear below control) var fixedY = -1   // y position (-1 if to appear below control) var startAt = 1   // 0 - sunday ; 1 - monday var
一个日期控件 javascript
03-16
在这个特定的案例中，我们关注的是一个名为“一个日期控件 javascript”的资源，它可能是一个自定义的JavaScript库或者组件，用于在网页上显示和操作日期。这个日期控件可能是为了帮助开发者更容易地处理日期输入、...
javascript日期选择控件
12-20
javascript日期选择控件 支持移动端
js 经典日期控件
penghao122
04-01 199
/**//** *本日历选择控件由tiannet根据前人经验完善而得。大部分代码来自meizz的日历控件。 *tiannet添加了时间选择功能、select,object标签隐藏功能，还有其它小功能。 *使用方法： * (1)只选择日期 * (2)选择日期和小时 * (3)选择日期和小时及分钟 *设置参数的方法 * (1)设置日期分隔符 setDa...
JavaScript的日期控件
jiaojinyue的专栏
04-28 560
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">日期控件/** * 返回日期 * @param d the delimiter * @param p the pattern of your date */String.prototype.toDate = functio
日期控件 javascript日期控件
05-01
JavaScript日期控件因其轻量级、灵活性和易于集成的特点，在Web开发中被广泛使用。本篇将深入探讨JavaScript日期控件，包括其基本原理、使用方法以及如何与jQuery库结合，同时也将提及压缩包中的相关资源。 一、...
日期控件 javascript
10-27
在这个主题中，我们将深入探讨JavaScript日期控件的实现、相关API以及如何结合CSS进行样式设计。 首先，JavaScript提供了内置的Date对象，可以用来处理日期和时间。通过创建Date实例，我们可以获取当前日期，或者...
日期控件javascript代码
12-09
JavaScript 日期控件是网页开发中常用的一种交互元素，它允许用户方便地选择日期，常用于表单输入。本示例提供了三个不同的日期控件实现，每个控件都有相应的显示效果图片，可以直接复制代码到项目中使用。 核心...
JavaScript实现的日期控件具体代码
10-26
JavaScript 实现的日期控件是一种常见于网页交互中的组件，用于方便用户选择日期。这个控件通常会自动读取当前时间，并提供一个日历界面让用户点击选择日期。下面我们将详细探讨如何使用JavaScript来创建这样的控件...
JavaScript日期控件01（日期选择器）
03-06
博文链接：https://fantasyyong.iteye.com/blog/164016
JavaScript经典日期控件
02-25
JavaScript写的经典日期控件，包括周期时间的判断，日期函数
html5 多种日期选择框
12-10
多种日期选择框，模拟手机app日期选择框的多种效果
日期选择时间控件 很强悍的
09-24
日期选择时间控件 里面有好几个可以选择 自己随便选 欢迎来下载 O(∩_∩)O~
javascript 日期控件
weixin_30612769的博客
04-01 101
这是第n次重构了，有不少性能的优化提升。 PS： 1.支持各种范围指定 2.支持选中回调 3.支持时间选定（滑轮效果，你懂的） 4.支持多面板 需要详细源码请回复！ <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>t...
javascript日期控件
我的专栏
04-21 658
function Calendar(beginYear, endYear, language, patternDelimiter, date2StringPattern, string2DatePattern) { this.beginYear = beginYear || 1990; this.endYear = endYear || 2020; this.language = lang
JavaScript日期控件
liu_james的专栏
03-12 689
/***本日历选择控件由tiannet根据前人经验完善而得。大部分代码来自meizz的日历控件。*tiannet添加了时间选择功能、select,object标签隐藏功能，还有其它小功能。*使用方法：* (1)只选择日期 * (2)选择日期和小时 * (3)选择日期和小时及分钟 *设置参数的方法* (1)设置日期分隔符 setDateSplit(strSplit);默认为"-"* (2)设置日期与
JavaScript日期控件实例与代码展示
标题"日期控件javascript代码"明确指出了本文的核心内容——JavaScript与日期选择器相关的编程技巧。 首先，示例1展示了如何使用自定义的字符串格式化方法和Calendar对象来创建一个动态的日期选择器。`String....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值