`
foolraty
  • 浏览: 400224 次
  • 性别: Icon_minigender_1
  • 来自: 南宁
文章分类
社区版块
存档分类
最新评论

日期输入特效限制输入格式,日历选择显示

prototype.netJavaScriptJ#浏览器 
阅读更多
自己整合别人的代码. 
<SCRIPT LANGUAGE="JavaScript">   
/*------------------------------------------------*/   
//more javascript from http://Www.VeryAsp.Net   
/*   
* Added by LiuXiaoChong 2005.4.25   
* 限制输入的日期控件   
* Param: txtName 为要限制输入的文本框的名称   
*   
* 功能描述：1，只能输入数字   
*                    2，左右键可以移动编辑焦点   
*                    3，上下键可以对数据进行微调   
*                    4，控件包含了对日期的合法校验   
*/   
function regDateControl(txtName)   
{   
    var oInput = document.getElementById(txtName);   
    oInput.middleChar = "-";   
    oInput.selectIndex = 1; //默认选中年   
    oInput.maxLength = 10;   
    oInput.style.imeMode = "disabled";   
    oInput.value = specialText_GetDate(oInput.middleChar);   
    oInput.charWidth = oInput.createTextRange().boundingWidth / oInput.maxLength;   
  
    //注册单击事件   
    oInput.onclick = specialText_ClickEvent;   
    oInput.onkeydown = specialText_KeyDownEvent;   
    oInput.onfocus = function(){specialText_SelectYear(this);}   
    oInput.onblur = function()   
    {   
        specialText_validYear(this);   
        specialText_validMonth(this);   
        specialText_validDate(this);   
    }   
    //屏蔽鼠标右键和拖动操作   
    oInput.oncontextmenu = function(){return false;}   
    oInput.ondrop = function(){return false;}   
}   
  
//鼠标单击，根据位置对日期进行分体选择   
function specialText_ClickEvent()   
{   
	c.showMoreDay = true;c.show(this,'1980-01-01');
    event.cancelBubble = true;   
    specialText_validYear(this);   
    specialText_validMonth(this);   
    specialText_validDate(this);   
    if(event.offsetX <= specialText_getCharWidth(this.charWidth,4))   
        specialText_SelectYear(this);   
    else if(event.offsetX > specialText_getCharWidth(this.charWidth,4)   
            && event.offsetX <= specialText_getCharWidth(this.charWidth,7))   
        specialText_SelectMonth(this);   
    else if(event.offsetX > specialText_getCharWidth(this.charWidth,7))   
        specialText_SelectDate(this);   
}   
//选中年份   
function specialText_SelectYear(oInput)   
{   
    var oRange = oInput.createTextRange();   
    oRange.moveStart("character",0);   
    oRange.moveEnd("character",-6);   
    //代表选中了年   
    oInput.selectIndex = 1;   
    oRange.select();   
}   
//选中月份   
function specialText_SelectMonth(oInput)   
{   
    var oRange = oInput.createTextRange();   
    oRange.moveStart("character",5);   
    oRange.moveEnd("character",-3);   
    //代表选中了月   
    oInput.selectIndex = 2;   
    oRange.select();   
}   
//选中日期   
function specialText_SelectDate(oInput)   
{   
    var oRange = oInput.createTextRange();   
    oRange.moveStart("character",8);   
    //代表选中了日期   
    oInput.selectIndex = 3;   
    oRange.select();   
}   
//校验年份有效性   
function specialText_validYear(oInput)   
{   
    var arrValue = oInput.value.split(oInput.middleChar);   
    var strYear = arrValue[0];   
  
    if(parseInt(strYear,10) == 0)   
        arrValue[0] = 2000;   
    //如果年份小于4位，则在2000基础上增加   
    else if(strYear.length < 4)   
        arrValue[0] = 2000 + parseInt(strYear,10);   
    oInput.value = arrValue.join(oInput.middleChar);   
}   
//校验月份有效性   
function specialText_validMonth(oInput)   
{   
    var arrValue = oInput.value.split(oInput.middleChar);   
    var strMonth = arrValue[1];   
    //如果月份输入了0，则按1月处理   
    if(parseInt(strMonth,10) == 0)   
         arrValue[1] = "01";   
    //如果月份是一位，则前面补0   
    else if(strMonth.length < 2)   
        arrValue[1] = "0" + strMonth;   
    //如果月份大于12月，自动转为12月   
    else if(parseInt(strMonth,10) > 12)   
        arrValue[1] = "12";   
    oInput.value = arrValue.join(oInput.middleChar);   
}   
//校验日期有效性   
function specialText_validDate(oInput)   
{   
    var arrValue = oInput.value.split(oInput.middleChar);   
    var strYear = arrValue[0];   
    var strMonth = arrValue[1];   
    var strDate = arrValue[2];   
    var intMonth = parseInt(strMonth,10);   
    if(parseInt(strDate,10) == 0)   
        arrValue[2] = "01";   
    else if(strDate.length < 2)   
        arrValue[2] = "0" + strDate;   
    else   
    {   
        //如果超过了月份的最大天数，则置为最大天数   
        var monthMaxDates = specialText_getMonthDates(strYear,strMonth);   
        if(parseInt(strDate,10) > monthMaxDates)   
            arrValue[2] = monthMaxDates;   
    }   
    oInput.value = arrValue.join(oInput.middleChar);   
}   
  
function specialText_YearAdd(oInput,isMinus)   
{   
    var arrValue = oInput.value.split(oInput.middleChar);   
    var strYear = arrValue[0];   
    if(isMinus)   
    {   
        arrValue[0] = parseInt(strYear,10) - 1;   
        if(parseInt(arrValue[0],10) < 1)   
            arrValue[0] = "0001";   
    }   
    else   
        arrValue[0] = parseInt(strYear,10) + 1;   
    oInput.value = arrValue.join(oInput.middleChar);   
    specialText_validYear(oInput);   
    specialText_SelectYear(oInput);   
}   
  
function specialText_MonthAdd(oInput,isMinus)   
{   
    var arrValue = oInput.value.split(oInput.middleChar);   
    var strMonth = arrValue[1];   
    if(isMinus)   
    {   
        arrValue[1] = parseInt(strMonth,10) - 1;   
        if(parseInt(arrValue[1],10) == 0)   
            arrValue[1] = "12";   
    }   
    else   
    {   
        arrValue[1] = parseInt(strMonth,10) + 1;   
        if(parseInt(arrValue[1],10) == 13)   
            arrValue[1] = "01";   
    }   
    oInput.value = arrValue.join(oInput.middleChar);   
    specialText_validMonth(oInput);   
    specialText_SelectMonth(oInput);   
}   
  
function specialText_DateAdd(oInput,isMinus)   
{   
    var arrValue = oInput.value.split(oInput.middleChar);   
    var strYear = arrValue[0];   
    var strMonth = arrValue[1];   
    var strDate = arrValue[2];   
    var monthMaxDates = specialText_getMonthDates(strYear,strMonth);   
  
    if(isMinus)   
    {   
        arrValue[2] = parseInt(strDate,10) - 1;   
        if(parseInt(arrValue[2],10) == 0)   
            arrValue[2] = monthMaxDates;   
    }   
    else   
    {   
        arrValue[2] = parseInt(strDate,10) + 1;   
        if(parseInt(arrValue[2],10) == (monthMaxDates + 1))   
            arrValue[2] = "01";   
    }   
    oInput.value = arrValue.join(oInput.middleChar);   
    specialText_validDate(oInput);   
    specialText_SelectDate(oInput);   
}   
  
function specialText_KeyDownEvent()   
{   
    //如果按了数字键   
    if((event.keyCode >= 48 && event.keyCode <= 57) ||   
       (event.keyCode >= 96 && event.keyCode <= 105))   
    {        
        var oRange = document.selection.createRange();   
        if(oRange.text.indexOf(this.middleChar) != -1)   
            event.returnValue = false;   
        else   
            event.returnValue = true;   
    }   
    //如果按了方向键   
    else if(event.keyCode >= 37 && event.keyCode <= 40)   
    {   
        event.returnValue = false;   
        var keyCode = event.keyCode;   
        //按了左键   
        if(keyCode == 37)   
        {   
            if(this.selectIndex == 1)   
            {   
                specialText_validYear(this);   
                specialText_SelectDate(this);   
            }   
            else if(this.selectIndex == 2)   
            {   
                specialText_validMonth(this);   
                specialText_SelectYear(this);   
            }   
            else if(this.selectIndex == 3)   
            {   
                specialText_validDate(this);   
                specialText_SelectMonth(this);   
            }   
        }   
        //按了右键   
        if(keyCode == 39)   
        {   
            if(this.selectIndex == 1)   
            {   
                specialText_validYear(this);   
                specialText_SelectMonth(this);   
            }   
            else if(this.selectIndex == 2)   
            {   
                specialText_validMonth(this);   
                specialText_SelectDate(this);   
            }   
            else if(this.selectIndex == 3)   
            {   
                specialText_validDate(this);   
                specialText_SelectYear(this);   
            }   
        }   
  
        //按了上键   
        if(keyCode == 38)   
        {   
            if(this.selectIndex == 1)   
            {   
                specialText_validYear(this);   
                specialText_YearAdd(this,true);   
            }   
            else if(this.selectIndex == 2)   
            {   
                specialText_validMonth(this);   
                specialText_MonthAdd(this,true);   
            }   
            else if(this.selectIndex == 3)   
            {   
                specialText_validDate(this);   
                specialText_DateAdd(this,true);   
            }   
        }   
  
        //按了下键   
        if(keyCode == 40)   
        {   
            if(this.selectIndex == 1)   
            {   
                specialText_validYear(this);   
                specialText_YearAdd(this,false);   
            }   
            else if(this.selectIndex == 2)   
            {   
                specialText_validMonth(this);   
                specialText_MonthAdd(this,false);   
            }   
            else if(this.selectIndex == 3)   
            {   
                specialText_validDate(this);   
                specialText_DateAdd(this,false);   
            }   
        }   
    }   
    //如果按了F5 或 TAB，不屏蔽   
    else if(event.keyCode == 116 || event.keyCode == 9)   
        event.returnValue = true;   
    else   
    {   
        event.returnValue = false;   
        event.keyCode = 0;   
    }   
}   
  
/*---------------------辅助函数-----------------------*/   
//得到默认日期   
function specialText_GetDate(middleChar)   
{   
    var oDate = new Date();   
    return oDate.getYear() + middleChar   
           + (oDate.getMonth() < 10 ? ("0" + oDate.getMonth()) : oDate.getMonth()) + middleChar   
           + (oDate.getDate() < 10 ? ("0" + oDate.getDate()) : oDate.getDate());   
}   
//得到字符像素宽度   
function specialText_getCharWidth(charWidth,charNum)   
{   
    return charNum * charWidth;   
}   
//得到某年某月的最大天数   
function specialText_getMonthDates(strYear,strMonth)   
{   
    var intMonth = parseInt(strMonth,10);   
    if(intMonth == 1 || intMonth == 3 || intMonth == 5 || intMonth == 7   
       || intMonth == 8 || intMonth == 10 || intMonth == 12)   
        return 31;   
    //处理30天的月份   
    else if(intMonth == 4 || intMonth == 6 || intMonth == 9 || intMonth == 11)   
        return 30;   
    //处理2月份   
    else   
    {   
        //闰年   
        if(specialText_isLeapYear(strYear))   
            return 29;   
        //平年   
        else   
            return 28;   
    }   
}   
//判断是否是闰年   
function specialText_isLeapYear(strYear)   
{   
    var intYear = parseInt(strYear,10);   
    if((intYear % 4 == 0 && intYear % 100 != 0) ||   
       (intYear % 100 == 0 && intYear % 400 == 0))   
        return true;   
    else   
        return false;   
}   
  
function init()   
{   
    regDateControl('date1');   
}   
</SCRIPT>   































<script language="javascript">
function Calendar(objName)
{//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
this.style = {
borderColor         : "#909eff", //边框颜色
headerBackColor      : "#909EFF", //表头背景颜色
headerFontColor      : "#ffffff", //表头字体颜色
bodyBarBackColor    : "#f4f4f4", //日历标题背景色
bodyBarFontColor    : "#000000", //日历标题字体色
bodyBackColor       : "#ffffff", //日历背景色
bodyFontColor            : "#000000", //日历字体色
bodyHolidayFontColor     : "#ff0000", //假日字体色
watermarkColor       : "#d4d4d4",  //背景水印色
moreDayColor             : "#cccccc"
};
this.showMoreDay = false; //是否显示上月和下月的日期
this.Obj = objName;
this.date = null;
this.mouseOffset = null;
this.dateInput = null;
this.timer = null;
};
Calendar.prototype.toString = function()
{
var str = this.getStyle();
str += '<div Author="alin" class="calendar" style="display:none;" onselectstart="return false" oncontextmenu="return false" id="Calendar">\n';
str += '<div Author="alin" class="cdrWatermark" id="cdrWatermark"></div><div id="cdrBody" style="position:absolute;left:0px;top:0px;z-index:2;width:140px;">';
str += this.getHeader();
str += this.getBody();
str += '</div><div Author="alin" id="cdrMenu" style="position:absolute;left:0px;top:0px;z-index:3;display:none;"  onmouseover="' + this.Obj + '.showMenu(null);" onmouseout="' + this.Obj + '.hideMenu();"></div></div>';
return str;
};
Calendar.prototype.getStyle = function()
{
var str = '<style type="text/css">\n';
str += '.calendar{position:absolute;width:140px!important;width /**/:142px;height:184px!important;height /**/:174px;background-color:'+this.style.bodyBackColor+';border:1px solid ' + this.style.borderColor + ';left:0px;top:0px;z-index:9999;}\n';
str += '.cdrHeader{background-color:'+ this.style.headerBackColor +';width:140px;height:22px;font-size:12px;color:'+this.style.headerFontColor+';}\n';
str += '.cdrWatermark{position:absolute;left:0px;top:55px;width:140px;font-family: Arial Black;font-size:50px;color:'+this.style.watermarkColor+';z-index:1;text-align:center;}\n';
str += '.cdrBodyBar{background-color:' + this.style.bodyBarBackColor + ';font-size:12px;color:' + this.style.bodyBarFontColor + ';width:140px;height:20px;}\n';
str += '.cdrBody{width:140px;height:122px!important; height /**/:110px;font-size:12px;cursor:pointer;color:' + this.style.bodyFontColor + ';}\n';
str += '.dayOver{height:16px;padding:0px;border:1px solid black;background-color:#f4f4f4;}\n';
str += '.dayOut{padding:1px;border:none;height:16px;}\n';
str += '.menuOver{background-color:'+this.style.headerBackColor+';color:'+this.style.headerFontColor+';font-size:12px;}\n';
str += '.headerOver{border:1px solid black;background-color:#f4f4f4;color:black;cursor:default;}\n';
str += '.cdrMenu{font-size:12px;border:1px solid #000000;background-color:#ffffff;cursor:default;width:100%}\n';
str += 'html>body #Calendar{width:142px;174px;}';
str += '</style>\n';
return str;
};
Calendar.prototype.getHeader = function()
{
var str = '<table Author="alin" class="cdrHeader" cellSpacing="2" cellPadding="0"><tr Author="alin" align="center">\n';
str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" onmouseout="this.className=\'\'" id="previousYear" title="上一年份" style="cursor:pointer;width:10px;" onclick="'+this.Obj+'.onChangeYear(false);"><<</td>\n';
str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" onmouseout="this.className=\'\'" id="previousMonth" title="上一月份" style="cursor:pointer;width:10px;" onclick="'+this.Obj+'.onChangeMonth(false);"><</td>\n';
str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" id="currentYear" style="width:50px;" onclick="' + this.Obj + '.showMenu(true);" onmouseout="' + this.Obj + '.hideMenu();this.className=\'\';">0</td>\n';
str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" id="currentMonth" onclick="' + this.Obj + '.showMenu(false);" onmouseout="' + this.Obj + '.hideMenu();this.className=\'\';">0</td>\n';
str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" onmouseout="this.className=\'\'" id="nextMonth" title="下一月份" style="cursor:pointer;width:10px;" onclick="'+this.Obj+'.onChangeMonth(true);">></td>\n';
str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" onmouseout="this.className=\'\'" id="nextYear" title="下一年份" style="cursor:pointer;width:10px;" onclick="'+this.Obj+'.onChangeYear(true);">>></td></tr>\n';
str += '</table>\n';
return str;
};
Calendar.prototype.getBody = function()
{
var n = 0;
var str = this.getBodyBar();
str += '<table Author="alin" class="cdrBody" cellSpacing="2" cellPadding="0">\n';
for(i = 0; i < 6; i++)
{
str += '<tr Author="alin" align="center">';
for(j = 0; j < 7; j++)
{
str += '<td Author="alin" class="dayOut" id="cdrDay'+(n++)+'" width="13%"></td>\n';
}
str += '</tr>';
}
str += '</table>\n';
str += '<table Author="alin" class="cdrBodyBar" cellSpacing="2" cellPadding="0"><tr align="center" Author="alin"><td Author="alin" style="cursor:pointer;" onclick="'+this.Obj+'.getToday();">今天：'+new Date().toFormatString("yyyy年mm月dd日")+'</td></tr></table>\n';
return str;
};
Calendar.prototype.getBodyBar = function()
{
var str = '<table Author="alin_bar" id="cdrBodyBar" class="cdrBodyBar" style="cursor:move;" cellSpacing="2" cellPadding="0"><tr Author="alin_bar" align="center">\n';
var day = new Array('日','一','二','三','四','五','六');
for(i = 0; i < 7; i++)
{
str += '<td Author="alin_bar">' + day[i] + '</td>\n';
}
str += '</tr></table>';
return str;
}
Calendar.prototype.getYearMenu = function(year)
{
var str = '<table Author="alin" cellSpacing="0" class="cdrMenu" cellPadding="0">\n';
for(i = 0; i < 10; i++)
{
var _year = year + i;
var _date = new Date(_year,this.date.getMonth(),this.date.getDate());
//alert(this.date.getDate());点击年份时
str += '<tr Author="alin" align="center"><td Author="alin" width="13%" height="16" ';
if(this.date.getFullYear() != _year)
{
str += 'onmouseover="this.className=\'menuOver\'" onmouseout="this.className=\'\'" ';
}
else
{
str += 'class="menuOver"';
}
str += 'onclick="' + this.Obj + '.bindDate(\'' + _date.toFormatString("yyyy-mm-dd") + '\')">' + _year + '年</td>\n';
str += '</tr>';
}
str += '<tr Author="alin" align="center"><td Author="alin"><table Author="alin" style="font-size:12px;width:100%;" cellSpacing="0" cellPadding="0">\n';
str += '<tr Author="alin" align="center"><td Author="alin" onmouseover="this.className=\'menuOver\'" onmouseout="this.className=\'\'" onclick="'+this.Obj+'.getYearMenu('+ (year - 10) + ')"><<</td>\n';
str += '<td Author="alin" onmouseover="this.className=\'menuOver\'" onmouseout="this.className=\'\'" onclick="'+this.Obj+'.getYearMenu('+ (year + 10) +')">>></td><tr>\n';
str += '</table></td></tr>\n';
str += '</table>';
var _menu = getObjById("cdrMenu");
_menu.innerHTML = str;
};
Calendar.prototype.getMonthMenu = function()
{
var str = '<table Author="alin" cellSpacing="0" class="cdrMenu" cellPadding="0">\n';
for(i = 1; i <= 12; i++)
{
var _date = new Date(this.date.getFullYear(),i-1,this.date.getDate());
str += '</tr><tr Author="alin" align="center"><td Author="alin" height="16" ';
if(this.date.getMonth() + 1 != i)
{
str += 'onmouseover="this.className=\'menuOver\'" onmouseout="this.className=\'\'" ';
}
else
{
str += 'class="menuOver"';
}
str += 'onclick="' + this.Obj + '.bindDate(\'' + _date.toFormatString("yyyy-mm-dd") + '\')">'+i+'月</td></tr>\n';
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
str += '</table>';
var _menu = getObjById("cdrMenu");
_menu.innerHTML = str;
};
Calendar.prototype.show = function()
{
if (arguments.length >  3  || arguments.length == 0)
{
alert("对不起！传入参数不对！" );
return;
}
var _date = null;
var _evObj = null;
var _initValue = null
for(i = 0; i < arguments.length; i++)
{
if(typeof(arguments[i]) == "object" && arguments[i].type == "text")
{_date = arguments[i];}
else if(typeof(arguments[i]) == "object")
{_evObj = arguments[i];}
else if(typeof(arguments[i]) == "string")
{_initValue = arguments[i];}
}
_evObj = _evObj || _date;
inputObj = _date;
targetObj = _evObj
if(!_date){alert("传入参数错误!"); return;}
this.dateInput = _date;
_date = _date.value;
if(_date == "" && _initValue) _date = _initValue;
this.bindDate(_date);
var _target = getPosition(_evObj);
var _obj = getObjById("Calendar");
_obj.style.display = "";
_obj.style.left = _target.x + 'px';
if((document.body.clientHeight - (_target.y + _evObj.clientHeight)) >= _obj.clientHeight)
{
_obj.style.top = (_target.y + _evObj.clientHeight) + 'px';
}
else
{
_obj.style.top = (_target.y - _obj.clientHeight) + 'px';
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
};
Calendar.prototype.hide = function()
{
var obj = getObjById("Calendar");
obj.style.display = "none";
};
Calendar.prototype.bindDate = function(date)
{
var _monthDays = new Array(31,30,31,30,31,30,31,31,30,31,30,31);
var _arr = date.split('-');
var _date = new Date(_arr[0],_arr[1]-1,_arr[2]);
if(isNaN(_date)) _date = new Date();
this.date = _date;
this.bindHeader();
var _year = _date.getFullYear();
var _month = _date.getMonth();
var _day = 1;
var _startDay = new Date(_year,_month,1).getDay();
var _previYear = _month == 0 ? _year - 1 : _year;
var _previMonth = _month == 0 ? 11 : _month - 1;
var _previDay = _monthDays[_previMonth];
if (_previMonth == 1) _previDay =((_previYear%4==0)&&(_previYear%100!=0)||(_previYear%400==0))?29:28;
_previDay -= _startDay - 1;
var _nextDay = 1;
_monthDays[1] = ((_year%4==0)&&(_year%100!=0)||(_year%400==0))?29:28;
for(i = 0; i < 40; i++)
{
var _dayElement = getObjById("cdrDay" + i);
_dayElement.onmouseover = Function(this.Obj + ".onMouseOver(this)");
_dayElement.onmouseout = Function(this.Obj + ".onMouseOut(this)");
_dayElement.onclick = Function(this.Obj + ".onClick(this)");
this.onMouseOut(_dayElement);
_dayElement.style.color = "";
if(i < _startDay)
{
//获取上一个月的日期
if(this.showMoreDay)
{
var _previDate = new Date(_year,_month - 1,_previDay);
_dayElement.innerHTML = _previDay;
_dayElement.title = _previDate.toFormatString("yyyy年mm月dd日");
_dayElement.value = _previDate.toFormatString("yyyy-mm-dd");
_dayElement.style.color = this.style.moreDayColor;
_previDay++;
}else
{
_dayElement.innerHTML = "";
_dayElement.title = "";
}
}
else if(_day > _monthDays[_month])
{
//获取下个月的日期
if(this.showMoreDay)
{
var _nextDate = new Date(_year,_month + 1,_nextDay);
_dayElement.innerHTML = _nextDay;
_dayElement.title = _nextDate.toFormatString("yyyy年mm月dd日");
_dayElement.value = _nextDate.toFormatString("yyyy-mm-dd");
_dayElement.style.color = this.style.moreDayColor;
_nextDay++;
}else
{
_dayElement.innerHTML = "";
_dayElement.title = "";
}
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
else if(i >= new Date(_year,_month,1).getDay() && _day <= _monthDays[_month])
{
//获取本月日期
_dayElement.innerHTML = _day;
if(_day == _date.getDate())
{
this.onMouseOver(_dayElement);
_dayElement.onmouseover = Function("");
_dayElement.onmouseout = Function("");
}
if(this.isHoliday(_year,_month,_day))
{
_dayElement.style.color = this.style.bodyHolidayFontColor;
}
var _curDate = new Date(_year, _month, _day);
_dayElement.title =  _curDate.toFormatString("yyyy年mm月dd日");
_dayElement.value = _curDate.toFormatString("yyyy-mm-dd");
_day++;
}
else
{
_dayElement.innerHTML = "";
_dayElement.title = "";
}
}
var _menu = getObjById("cdrMenu");
_menu.style.display = "none";
};
Calendar.prototype.bindHeader = function()
{
var _curYear = getObjById("currentYear");
var _curMonth = getObjById("currentMonth");
var _watermark = getObjById("cdrWatermark");
_curYear.innerHTML = this.date.toFormatString("yyyy年");
_curMonth.innerHTML =  this.date.toFormatString("mm月");
_watermark.innerHTML = this.date.getFullYear();
};
Calendar.prototype.getToday = function()
{
var _date = new Date();
this.bindDate(_date.toFormatString("yyyy-mm-dd"));
};
Calendar.prototype.isHoliday = function(year,month,date)
{
var _date = new Date(year,month,date);
return (_date.getDay() == 6 || _date.getDay() == 0);
};
Calendar.prototype.onMouseOver = function(obj)
{
obj.className = "dayOver";
};
Calendar.prototype.onMouseOut = function(obj)
{//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
obj.className = "dayOut";
};
Calendar.prototype.onClick = function(obj)
{
var abc = obj.value;
var tmp = abc.split("-");
for(var i=0;i<tmp.length;i++){
	if(tmp[i]<10){
		tmp[i]='0'+tmp[i];
	}
}
obj.value=tmp[0]+'-'+tmp[1]+'-'+tmp[2];
//alert(tmp[0]+'-'+tmp[1]+'-'+tmp[2]);
if(obj.innerHTML != "")  this.dateInput.value = obj.value;
//alert(obj.value);设置input的值
this.hide();
};
Calendar.prototype.onChangeYear = function(isnext)
{
var _year = this.date.getFullYear();
var _month = this.date.getMonth() + 1;
var _date = this.date.getDate();
if(_year > 999 && _year <10000)
{
	if(isnext){_year++;}else{ _year --;}
	}
	else
	{
	alert("年份超出范围（1000-9999）!");
	}

this.bindDate(_year + '-' + _month + '-' + _date);

};
Calendar.prototype.onChangeMonth = function(isnext)
{
var _year = this.date.getFullYear();
var _month = this.date.getMonth() + 1;
var _date = this.date.getDate();
if(isnext){ _month ++;} else {_month--;}
if(_year > 999 && _year <10000)
{
if(_month < 1) {_month = 12; _year--;}
if(_month > 12) {_month = 1; _year++;}
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
else
{
alert("年份超出范围（1000-9999）!");
}
this.bindDate(_year + '-' + _month + '-' + _date);
};
Calendar.prototype.showMenu = function(isyear)
{
var _menu = getObjById("cdrMenu");
if(isyear != null)
{
var _obj = (isyear)? getObjById("currentYear") : getObjById("currentMonth");
if(isyear)
{
this.getYearMenu(this.date.getFullYear() - 5);
}
else
{
this.getMonthMenu();
}
_menu.style.top = (_obj.offsetTop + _obj.offsetHeight) + 'px';
_menu.style.left = _obj.offsetLeft + 'px';
_menu.style.width = _obj.offsetWidth + 'px';
}
if (this.timer != null) clearTimeout(this.timer);
_menu.style.display="";
}
Calendar.prototype.hideMenu = function()
{
var _obj = getObjById("cdrMenu");
this.timer = window.setTimeout(function(){_obj.style.display='none';},500);
}
Number.prototype.NaN0 = function()
{//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
return isNaN(this) ? 0 : this;
}
Date.prototype.toFormatString = function(fs)
{
if(fs.length == 1)
{//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
return this.getFullYear() + fs + (this.getMonth() + 1) + fs + this.getDate();
}
fs = fs.replace("yyyy",this.getFullYear());
fs = fs.replace("mm",(this.getMonth() + 1));
fs = fs.replace("dd",this.getDate());
//alert(this.getDate());
return fs;
}
/************公用方法及变量**************/
var inputObj = null;
var targetObj = null;
var dragObj = null;
var mouseOffset = null;
function getObjById(obj)
{
if(document.getElementById)
{
return document.getElementById(obj);
}
else
{
alert("浏览器不支持!");
}
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
function mouseCoords(ev)
{
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop  - document.body.clientTop
};
}
function getPosition(e)
{
var left = 0;
var top  = 0;
while (e.offsetParent){
left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
e     = e.offsetParent;
}
left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
return {x:left, y:top};
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
function getMouseOffset(target, ev)
{
ev = ev || window.event;
var docPos    = getPosition(target);
var mousePos  = mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}
function closeCalendar(evt){
evt = evt || window.event;
var _target= evt.target || evt.srcElement;
if(!_target.getAttribute("Author") &&  _target != inputObj && _target != targetObj)
{
getObjById("Calendar").style.display = "none";
}
}
function dragStart(evt){
evt = evt || window.event;
var _target= evt.target || evt.srcElement;
if(_target.getAttribute("Author") == "alin_bar")
{
dragObj = getObjById("Calendar");
mouseOffset = getMouseOffset(dragObj, evt);
}
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
function drag(evt)
{
evt =  evt || window.event;
if(dragObj)
{
var mousePos = mouseCoords(evt);
dragObj.style.left = (mousePos.x - mouseOffset.x) + 'px';
dragObj.style.top  = (mousePos.y - mouseOffset.y) + 'px';
}
}
//拖动结束
function dragEnd(evt)
{
dragObj = null;
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
/***********End 公用方法*********/
document.onclick = closeCalendar;
document.onmousedown = dragStart;
document.onmousemove = drag;
document.onmouseup = dragEnd;
/*********结束**********/
</script>


<body onload="init();">     
<script>
var c = new Calendar("c");
document.write(c);
</script>


<table>
<tr>
<td>
普通调用:
<INPUT  TYPE="text" NAME="date1" onclick="" ></table>
</body>
分享到：
| 输入日期格式，只能在规定的地方输入(转)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js+css日历选择填写弹出框特效代码

    5. 验证与限制：设置日期选择的规则，例如最小日期和最大日期，防止用户选择无效日期。 6. CSS美化：应用样式，使日历看起来更加吸引人，同时保持易用性。 7. 响应式设计：通过媒体查询确保在不同设备和屏幕尺寸下...

    jQuery手机移动端日历日期选择.zip

    例如，可以改变日期格式、设置日期范围限制、添加特定日期的标记，或者调整颜色主题以匹配网站或应用的整体风格。同时，由于其轻量级和无图标的特性，该组件适用于各种类型的移动设备，无论是低端设备还是高端设备，...

    7天连锁酒店酒店预定日期特效

    在网页设计中，这样的日历特效对于提升用户体验至关重要，因为它简化了复杂的日期输入步骤，减少了用户操作的复杂性和出错的可能性。 “supersized”标签可能是指这款日历控件具有全屏展示或者大气的视觉效果。在...

    jQuery UI设置固定日期选择特效源码.zip

    在开发过程中，我们可能会遇到需要限制用户只能选择特定日期或日期范围的情况，这就涉及到设置固定日期特效。下面我们将详细探讨如何利用jQuery UI实现这一功能。 首先，要使用jQuery UI的日期选择器，你需要在页面...

    html5手机移动端日期选择器代码.zip

    4. **日期格式化**：根据需要，可能需要支持多种日期格式，并确保在不同语言环境下正确显示。 5. **事件处理**：监听并处理用户的选择行为，如改变日期、确认选择、取消选择等，更新输入框的值并触发相应的回调函数...

    jQuery单面板日历日期选择插件

    1. **设置日期格式**: 可以通过`format`选项来定义日期显示格式，如`dd-mm-yyyy`或`mm/dd/yyyy`。 2. **设置起始和结束日期**: 可以通过`startDate`和`endDate`选项限制用户可以选择的日期范围。 3. **禁用特定日期*...

    html5日历控件制作多皮肤动画日历选择器特效

    在网页设计和开发中，日历控件通常用于表单输入，如预约系统、事件安排或时间记录等场景。随着HTML5标准的发展，这种控件变得越来越多样化，不仅具备基本的日期选择功能，还能实现多皮肤和动画效果，为用户提供了...

    jQuery双日历选择插件double-date.zip

    总之，“jQuery双日历选择插件double-date”是JavaScript日期时间特效的一个实例，通过提供一个交互式的双日历选择界面，帮助用户更准确、高效地选择日期范围。通过合理的代码组织和良好的用户反馈机制，这个插件...

    jQuery选择日历插件.rar

    无论是简单的日期输入，还是复杂的日程管理，都有对应的解决方案。理解并掌握这些插件的使用，能极大地提升开发效率，提供更优质的用户体验。在实际项目中，开发者应根据需求选择合适的插件，并充分利用其提供的配置...

    jQuery单面板日历日期选择插件.zip

    在网页开发中，日期选择器是一个常见的功能，用于用户输入日期或选择日期范围。jQuery库以其简洁的API和丰富的插件库，为开发者提供了实现这一功能的便捷途径。本教程将围绕"jQuery单面板日历日期选择插件"展开，...

    HTML5手机移动端时间日期选择插件_在线演示_时间_日期_js特效_js代码_files.zip

    插件可能包含日历视图、滑块选择、触摸手势识别等功能，提升用户操作的便捷性。 5. **可配置性和可扩展性**：为了满足不同项目的需求，插件往往提供多种配置选项，如自定义样式、设定日期范围、设定默认值等。此外...

    可选择起始日期和结束日期的时间选择器.rar

    4. **自定义日历组件**：开发者可能使用自定义的日历组件，而不是依赖于浏览器的原生日期输入控件，以实现更灵活的设计和功能，如滑动选择日期范围。 5. **日期操作**：利用JavaScript的Date对象，开发者可以获取、...

    JS日历选择器控件特效代码

    - **日期范围限制**：设定最小和最大可选日期，避免无效输入。 - **特殊日期标记**：可以标记节假日、纪念日等特殊日期。 - **事件绑定**：允许添加自定义事件，如点击某天执行特定函数。 5. **压缩包内容解析**...

    jQuery日期时间选择器插件.zip

    4. **国际化**：考虑到全球用户的需求，插件可能支持多语言，可以根据用户的浏览器设置自动切换日期和时间的显示格式。 5. **兼容性**：好的jQuery日期时间选择器插件会确保与主流浏览器的兼容性，包括Chrome、Fire...

    Select下拉式日期选择菜单.rar

    总之，"Select下拉式日期选择菜单"是一个实用的前端组件，结合了HTML、CSS和JavaScript技术，为用户提供了一种简洁、准确的日期输入方式。理解并掌握这种实现方法，将有助于开发出更高效、更用户友好的网页应用。

    常见javascript的日历效果，共10个效果

    10. **日期计算和验证**：JavaScript日历效果还可能包括计算日期差、限制可选日期范围等功能，以确保用户输入的有效性。 这些JavaScript日历特效的实现基于核心的JavaScript语法，可能结合了DOM操作、事件处理、...

    HTML5手机移动端时间日期.zip

    5. **国际化**：支持多语言，可以根据用户的系统设置自动调整日期和时间的显示格式。 6. **可定制性**：颜色、字体、大小等样式可以通过CSS进行调整，满足不同的设计需求。 7. **事件回调**：提供了诸如`onSelect`、...

    web 表单日期控件看看有没适合的

    在网页设计和开发中，表单日期控件是不可或缺的一部分，它们为用户提供了一种直观、用户友好的方式来输入和选择日期。日期控件通常与JavaScript（js）和JavaScript库一起使用，以实现动态效果和增强用户体验。让我们...

    点击text文本框弹出日期选择器.zip

    在实际应用中，我们还需要考虑一些高级特性，如日期范围限制、禁用特定日期、支持多种格式的日期输出，以及与服务器时间同步等。此外，为了提高用户体验，还可以添加键盘导航、自动关闭日期选择器等功能。 总结来说...

Magicbox
Global site tag (gtag.js) - Google Analytics