日期控件的另一种思路,限制输入格式的日期控件

转载 2005年04月28日 12:24:00
关于日期输入,现在网上的日期控件很多,在这里,我试着模仿了部分CS程序中的日期输入控件,从另一个角度来考虑日期格式的输入,即输入日期时固定格式,用户只能在程序规定的地方输入数据。

例程如下,希望对大家有所帮助~~~  (时间仓促,例程是IE ONLY的)

<SCRIPT LANGUAGE="JavaScript">
/*----------------------------可以放到外部JS中,DateInputControl.js--------------------*/

/*
* 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()
{
    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;
}

/*----------------------------可以放到外部JS中 DateInputControl.js--------------------*/

function init()
{
    regDateControl('date1');
}
</SCRIPT>

<body onload="init()">
<INPUT TYPE="text" NAME="date1">
</body>

----- 日期控件的另一种思路,限制输入格式的日期控件(支持IE,NS,FF 在FF,NS中存在BUG) -----

2006.1.19增加了对NS,FF的支持,不过由于一些特殊原因,在NS中还存在很多的bug,努力改进中...FF中的BUG: 1,可以拖动                         2,可以输...
  • LxcJie
  • LxcJie
  • 2005年04月26日 14:17
  • 2128

(1) 漂亮的日期控件

1 前言 这是一款漂亮,易用的js日期控件 , 可以自定义时间格式 , 定义最大时间,最小时间 , 可以选择年月日,时分秒   点击  下载地址  ,下载js文件 2 使用方法   2...
  • jianfpeng241241
  • jianfpeng241241
  • 2016年02月19日 11:25
  • 526

easyUI 日期控件修改...

个人觉得easyUI挺好用的。 日期本来效果是这样的: 改为中式的,方法如下: 首先是月份的,找到下面的代码: (这段代码在 jquery.easyui.min.js 中,Ctrl+F...
  • u011314442
  • u011314442
  • 2016年07月28日 10:59
  • 773

自定义日期控件的格式

在控件集中的日期格式,支持三种形式,长型的、短型的、时间。有的时候我们需要同时显示日期和时间,就像JSP中显示的日期时间一样。在MFC中如何实现呢。在CDataTimeCtrl中有个方法SetForm...
  • atrueman123
  • atrueman123
  • 2010年08月09日 17:03
  • 702

在C#控件显示日期时控制日期的格式

我们从数据库提取的DataTime类型通常包括日期和时间,而我们在C#中,给控件做绑定时,通常只是绑定日期,同时还想让日期按自己设定的格式显示。所以,在绑定时我们通常要用到DateTime类的格式字符...
  • xiaoling9
  • xiaoling9
  • 2006年08月16日 17:19
  • 6957

selenium 时间日期控件的处理

今天在写自动化测试脚本的时候,出现了一个时间选项框,类似于这样: 这可难倒我了,难道要我去研究怎么去控制时间吗?额~~~估计很难。 网上查了一下,还真是有些人也遇到了这个问题。当然也可能遇到难点的...
  • MTbaby
  • MTbaby
  • 2017年07月04日 15:01
  • 708

extjs中日期控件的取值格式化

extjs DateField 的值用getValue()方法获取后是一大堆字符串,类似Tue Dec 07 2010 00:00:00 GMT 0800,这玩意存入数据库实在不好办。。。所以要把它格...
  • superdog007
  • superdog007
  • 2012年10月19日 16:00
  • 8689

移动端日期控件

转载自:http://www.cnblogs.com/luckythan/p/4470720.html?utm_source=tuicool 最近在写微信端的页面,要用到日期控件,得知其内置浏览...
  • ivan820819
  • ivan820819
  • 2015年05月03日 18:02
  • 1257

Python语言编写脚本时,对日期控件的处理方式

对日期控件,日期控件的输入控一般是不能手动输入的;把readonly属性去掉就好 其实很简单,我们不去搞时间日期空间,我们把它当成一个普通的input框处理就好了! 但是,很多...
  • huoyanyan2015
  • huoyanyan2015
  • 2017年02月13日 14:58
  • 371

javascript日期控件小集合

在网页中经常可能需要输入一些时间,如果全部手动输入难以保证准确率,所以收集了一些时间控件。 ...
  • yinqianhui1990
  • yinqianhui1990
  • 2012年09月18日 21:47
  • 5617
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:日期控件的另一种思路,限制输入格式的日期控件
举报原因:
原因补充:

(最多只允许输入30个字)