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

最新推荐文章于 2023-03-13 17:06:33 发布
最新推荐文章于 2023-03-13 17:06:33 发布
阅读量2.4k 收藏
点赞数
分类专栏： javascript 文章标签： ie function character microsoft date javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LxcJie/article/details/363609
版权

2006.1.19增加了对NS，FF的支持，不过由于一些特殊原因，在NS中还存在很多的bug，努力改进中...

FF中的BUG： 1，可以拖动

                         2，可以输入中文，破坏结构

NS中的BUG：1，可以拖动

                        2，可以输入中文，破坏结构

                        3，可以删除字符，破坏结构

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<SCRIPT LANGUAGE="JavaScript">
/*----------------------------可以放到外部JS中，DateInputControl.js--------------------*/

/*
* Added by LiuXiaoChong 2005.4.25
* 限制输入的日期控件
* Param: txtName 为要限制输入的文本框的名称
*
* 功能描述：1，只能输入数字
*                    2，左右键可以移动编辑焦点
*                    3，上下键可以对数据进行微调
*                    4，控件包含了对日期的合法校验
*/
var isNS = navigator.appName.indexOf("Netscape") != -1; //NS，FF
var isIE = navigator.appName.indexOf("Microsoft") != -1;
var fontWidth = 7; //字体宽度跟显示器像素无关，跟文本框的字体大小有关系，现在常用的几个字体大小记录如下：
                   //12pt - W6
                   //13pt - W7 默认字体大小
                   //14pt - W7
                   //15pt - W8
                   //如果是IE可以用程序计算出来，但是NS，FF没找到对应的解决方案，只能有手工来测了：（

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);
    //如果是IE，则自己计算
    if(isIE)
        oInput.charWidth = oInput.createTextRange().boundingWidth / oInput.maxLength;
    //否则，用自己定义的宽度
    else
        oInput.charWidth = fontWidth;

    //注册单击事件
    oInput.onclick = specialText_ClickEvent;
    if(isIE)
        oInput.onkeydown = specialText_KeyEvent;
    else
        oInput.onkeypress = specialText_KeyEvent;
    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(oEvent)
{
   
    if(isIE)
    {
        event.cancelBubble = true;
        oEvent = window.event;
    }
    else if(isNS)
        oEvent.stopPropagation();

    specialText_validYear(this);
    specialText_validMonth(this);
    specialText_validDate(this);
   
    var offX,offY;
   
    if(isIE)
        offX = oEvent.offsetX;
    else if(isNS)
           offX = oEvent.pageX - this.offsetLeft;

    if(offX <= specialText_getCharWidth(this.charWidth,4))
        specialText_SelectYear(this);
    else if(offX > specialText_getCharWidth(this.charWidth,4)
            && offX <= specialText_getCharWidth(this.charWidth,7))
        specialText_SelectMonth(this);
    else if(offX > specialText_getCharWidth(this.charWidth,7))
        specialText_SelectDate(this);
}
//选中年份
function specialText_SelectYear(oInput)
{
    if(isIE)
    {
        var oRange = oInput.createTextRange();
        oRange.moveStart("character",0);
        oRange.moveEnd("character",-6);
        //代表选中了年
        oInput.selectIndex = 1;
        oRange.select();
    }
    else if(isNS)
    {
        oInput.setSelectionRange(0,4);
        //代表选中了年
        oInput.selectIndex = 1;
    }
}
//选中月份
function specialText_SelectMonth(oInput)
{
    if(isIE)
    {
        var oRange = oInput.createTextRange();
        oRange.moveStart("character",5);
        oRange.moveEnd("character",-3);
        //代表选中了月
        oInput.selectIndex = 2;
        oRange.select();
    }
    else if(isNS)
    {
        oInput.setSelectionRange(5,7);
        //代表选中了月
        oInput.selectIndex = 2;
    }
}
//选中日期
function specialText_SelectDate(oInput)
{
    if(isIE)
    {
        var oRange = oInput.createTextRange();
        oRange.moveStart("character",8);
        //代表选中了日期
        oInput.selectIndex = 3;
        oRange.select();
    }
    else if(isNS)
    {
        oInput.setSelectionRange(8,10);
        //代表选中了日期
        oInput.selectIndex = 3;
    }
}
//校验年份有效性
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_KeyEvent(oEvent)
{
    if(window.event)
        oEvent = window.event;

    //如果按了数字键
    if((oEvent.keyCode >= 48 && oEvent.keyCode <= 57) ||
       (oEvent.keyCode >= 96 && oEvent.keyCode <= 105))
    {    
        if(isIE)
        {
            var oRange = document.selection.createRange();
            if(oRange.text.indexOf(this.middleChar) != -1)
                oEvent.returnValue = false;
        }
        else if(isNS)
        {
            var txtVal = this.value.substring(oInput.selectionStart,oInput.selectionEnd)
            if(txtVal.indexOf(this.middleChar) != -1)
                oEvent.preventDefault();
        }
    }
    //如果按了方向键
    else if(oEvent.keyCode >= 37 && oEvent.keyCode <= 40)
    {
        if(isIE)
            oEvent.returnValue = false;
        else if(isNS)
            oEvent.preventDefault();
           
        var keyCode = oEvent.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(oEvent.keyCode == 116 || oEvent.keyCode == 9)
    {
        oEvent.returnValue = true;
    }
    else
    {
        if(isIE)
        {
            oEvent.returnValue = false;
        }
        else if(isNS)
        {
            oEvent.preventDefault();
        }

        oEvent.keyCode = 0;
    }
}

/*---------------------辅助函数-----------------------*/
//得到默认日期
function specialText_GetDate(middleChar)
{
    var oDate = new Date();
    return oDate.getFullYear() + middleChar
           + (oDate.getMonth() < 10 ? ("0" + (oDate.getMonth()+1)) : (oDate.getMonth()+1)) + 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>
</head>
<body οnlοad="init()">
<form name="formName">
<INPUT TYPE="text" id="date1" NAME="date1">
</form>
</body>
</html>

LxcJie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
专栏目录
兼容IE日期控件
08-27
支持JSP，HTML各种软件，能有效兼容IE等各种主流浏览器
兼容ie、谷歌等浏览器的日期输入控件
10-12
自己测试过的兼容ie、谷歌等浏览器的日期输入控件，简单实用
兼容多种IE的javascript日期控件
10-11
从calendar日期控件改造来的,IE6,IE8,IE9测试过,google浏览器没通过 调用方法onfoucs="calendar()"
ie支持的日期插件_这6款堪称宝藏的浏览器插件，少有人知，但用了就舍不得卸载...
weixin_39631344的博客
11-30 277
“没装过插件的浏览器简直不配叫浏览器！”向你分享6款基于Chrome的浏览器插件，每个都超实用，而且适用于大部分Chrome内核的浏览器，一起来看看吧！SPS搜我听歌这是一款三顿超舍不得分享给你的听歌插件，提供了搜我听歌、搜我广播和搜我播客三个功能。让三顿最爱的自然是听歌功能，打开插件输入歌名就能搜索播放，几秒钟就能让你边听歌边上网。而且常规播放器有的功能它都有！支持调整音量、拖动进度条，支持收藏...
适用各种浏览器的日期控件
09-19
好看的日期控件，适用于任何浏览器，精确到时分秒。非常容易操作。
转一个日期输入控件，支持FF
10-30
转一个日期输入控件，支持FF
兼容FF-IE-Opera-Safari的日期选择控件
11-22
在网页开发中，日期选择控件是不可或缺的一部分，它允许用户方便地选择日期，常见于表单填写或事件安排等场景。"兼容FF-IE-Opera-Safari的日期选择控件" 提供了针对多种主流浏览器（Firefox, Internet Explorer, ...
商业编程-源码-ASP.NET日期选择控件.zip
06-20
6. **本地化**：为了适应不同的语言和文化，控件应支持日期格式的本地化，例如日/月/年或月/日/年的顺序，星期的起始日等。 7. **样式和皮肤**：为了适应网站的UI设计，日期选择控件可能提供多种预定义的样式或允许...
Android-PIN码专用输入控件支持任意长度和输入任意数据
08-13
PIN 码专用输入控件,支持更改 PinView 中每一个 EditText 的输入前、输入后、正在输入的 background 支持设置任意长度的 PIN 码长度 支持设置可输入的 PIN 码格式，目前支持文本、数字、可以自己自主设置，支持设置...
jQuery实现简单的日期输入格式化控件
11-28
设置input元素类名为 hhm-dateInputer,通过这个类来绑定这个日期输入控件。 js代码 这里应用了jQuery的库， 主要用于选择元素和绑定事件。 复制代码 代码如下: [removed][removed] 因为有大量的获取和设置光标位置...
js日期控件，完美支持IE8，支持多种浏览器
03-07
js日期控件，完美支持IE8，也支持火狐、傲游、搜狗等浏览器。
兼容ie的时间日期插件
03-26
兼容ie的时间日期插件，兼容ie的时间日期插件，兼容ie的时间日期插件，兼容ie的时间日期插件，兼容ie的时间日期插件，兼容ie的时间日期插件，兼容ie的时间日期插件，兼容ie的时间日期插件，兼容ie的时间日期插件，兼容ie的时间日期插件，兼容ie的时间日期插件，兼容ie的时间日期插件，
多浏览器兼容日期选择控件
05-31
多浏览器兼容日期选择控件,样式美观,兼容ie8,firefox,google等浏览器,无论是放在单页面还是框架页,都不受影响,可正常显示使用,真正解决兼容问题哦
兼容各浏览器的日期js控件
03-22
兼容各浏览器的日期控件
对WinForm的App.config文件进行加密
04-29 53
对WinForm的App.config文件进行加密最近在做一个WinForm的项目，由于采用的是在客户端直接连接数据库的方式，需要在客户端部署App.config，由于使用了EnterpriseLibrary，需要对App.config文件里的connectionStrings片断进行加密处理，搜索MSDN，发现已经有了现成的工具ASP.NETIIS注册工具(Aspnet_regiis.exe)，...
ie支持的日期插件_正式被抛弃！微软开始终结IE，转向新Edge浏览器
weixin_39556474的博客
11-27 105
从1995年到2020年，IE浏览器陪伴我们走过了25个年头，对于许多用户来说，IE就是他们接触互联网的开始。不过，IE正已逐渐被新Edge浏览器所取代，微软正用各种举措让用户放弃IE。在Chrome到来之前，IE一直是最流行的浏览器，在IE上打开4399小游戏玩一下午是许多人的童年趣事，在IE上看新闻、追剧、办公成为那个年代的独特风景。IE浏览器有过多个大版本的升级，但在面对Chrome的激烈竞...
IE7，8, 9, 10, 11浏览器兼容的时间控件（有效）
wlf_wzx的博客
05-27 1320
1.效果图： 给大家推荐一个时间控件的（点击就可查看）： My97DatePicker时间控件链接 2.源码如下，可以去百度网盘上面下载。 链接：https://pan.baidu.com/s/11l-hPHeuyqmyrZ0LwbKTRA 提取码：619s 3.注意： 下载文件之后，需要将lang，skin，calendar.js，WdatePicker.js四个包同时放到同一个文件夹下面， 前端页面引入 <script language="javascript" type="text/java
关于IE11浏览器input标签type=“date“ 不显示日期控件的解决
最新发布
qq_51745363的博客
03-13 1457
问题：写了input标签且type=”date“，但是在IE浏览器不兼容。
只显示年月的日期控件
热门推荐
qq_37017864的博客
05-19 2万+
火狐和ie浏览器对于<input type="month/date/type">不支持，为了让日期只显示年月日，总结了两种方法。1. jeDate v3.8.2 日期控件代码：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jeDate日期控件</title> <script type="text/javascript" src
"2022年优秀-第三章-Web服务器控件回顾及应用技巧
在这两个文件中，第三章Web 服务器控件回顾了ASP.NET页面文件的特点，包括文件的扩展名、脚本类型、事件处理程序、页面加载事件、页面是否为首次加载的属性、以及用于保存WEB控件状态值的页面隐藏控件和ASP.NET代码...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值