jq实现日期边输入边添加yy-MM-dd hh:mm:ss格式功能

最新推荐文章于 2022-07-14 15:55:48 发布
最新推荐文章于 2022-07-14 15:55:48 发布
阅读量238 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/u/3689373/blog/1551239
版权

    最近研究了一哈怎样实现用户边输入边添加yy-MM-dd hh:mm:ss格式功能，虽然实现了功能，但是总感觉用的是笨办法，大家有什么更好的方法希望可以指教哈我，谢谢。

    我用的是卡位数的方法来实现功能的，既是每次检验用户光标即输入的位置，然后根据位置不同，按需求拼接字符串，然后替换input中原来的字符串，然后在将光标位置移动到对应的位置。所以我觉得这是一个笨办法，但是又实在不知道大神们是怎么实现的。

    因此，我们需要知道移动input中光标的方法：

//移动光标到指定的pos处，obj为input元素的jq对象
var changeCursorPos= function(obj, pos) {
		var inpObj = obj[0];
		if (inpObj.setSelectionRange) {
			inpObj.setSelectionRange(pos, pos);
		} else {
			console.log('不兼容该方法');
		}
	}

    以及根据光标得到当前输入的是第几位：

//根据光标得到当前输入的是第几位
	var getIndex= function(obj){
		var oTxt1 = obj[0];
		var cursurPosition=-1;
		if(oTxt1.selectionStart){//非IE浏览器
			cursurPosition= oTxt1.selectionStart;
		}else{//IE
			var range = document.selection.createRange();
			range.moveStart("character",-oTxt1.value.length);
			cursurPosition=range.text.length;
		}
		return cursurPosition-1;
	}

    

    然后，我们要求只能按数字键，避免其他按键的干扰，因此在keydown时检验，数字键的keyCode是96到105以及48到57，以一个flag变量来标志按下的是否是某一个数字键，如下：

$tempInput.bind('keydown',function(event){
			var keyCode=event.keyCode;
			console.log(keyCode);
			for(var i=96;i<=105;i++){
				if(keyCode==i){
					flag=1;
					break;
				}
			}
			if(flag==0){
				for(var i=48;i<=57;i++){
					if(keyCode==i){
						flag=1;
						break;
					}
				}
			}

然后还需要限制只能够输入19位

//valueLength位限制输入的位数
if(flag==1) {
	   var index = getIndex($(':focus'));
	   if (index >= valueLength) {
		   return false;
	   }
	   if ($(this).hasClass('running')) {
		   return false;
	   }
	   $(this).addClass('running');
		   }else{
			   return false;
	   }

分析我们所要实现的yy-MM-dd hh:mm:ss格式，以输入月份为例，有两种情况，分别是以下两种位置；

114021_u8D0_3689373.png

102509_Y4P3_3689373.png

113911_yDAU_3689373.png

    当光标位于如图一所在位置时，因为月份不能大于12，因此，我们需要检验此时输入的数是否小于等于1并且第三位即月份的个位数是否小于2，如是，则只需要拼接好'-'字符并且输入的数替换下一位。比如此时input的value为：2012-01-23 21:21:21时。如果不是，则我们需要拼接好'-'字符，并且输入的数要替换第三位即月份的个位数，比如此时value为：2012-09-23 21:21:21。还有一种情况是当此时输入的数等于十位所允许最大数，第三位小于十位为最大数个位所允许的最大数时，还是直接替换下一位并拼接好‘-’字符，比如此时value值为2012-01-23 21:21:21，此时想输入3。

//当前光标所在位置即输入位置 当前input的value值 连接符号 所允许的十位数的最大数 所允许的个位数的最大数 当十位最大时所允许的个位最大数
var specificSymbol= function(index,string,sym,num,breakPoint,another){
		var i=index,str=string,symbol=sym,number=num,breakPoint=breakPoint,another=another;
		var val=str[i]; //当前输入的数
		var result={};
		var thirdNumber=str.substr(i+3,1);//需要检验的第三个数
		if(val<number&&thirdNumber<=breakPoint){
			str=str.substring(0,i)+symbol+val+str.substring(i+3,str.length);
			result.index=i+2;
			result.string=str;
		}else if(val==number&&thirdNumber<=another){
			str=str.substring(0,i)+symbol+val+str.substring(i+3,str.length);
			result.index=i+2;
			result.string=str;
		}
		else{
			str=str.substring(0,i)+symbol+'0'+val+str.substring(i+4,str.length);
			result.index=i+3;
			result.string=str;
		}
		return result;
	}

    当光标位于如图二所在位置时，与上面一样的情况，只是他不需要拼接特殊符号比如：‘-’，因此代码如下：

//当前光标所在位置即输入位置 当前input的value值 所允许的十位数的最大数 所允许的个位数的最大数 当十位最大时所允许的个位最大数
var specific= function(index,string,num,breakPoint,another){
		var i=index,str=string,number=num,breakPoint=breakPoint,another=another;
		var val=str[i]; //当前输入的数
		var thirdNumber=str.substr(i+2,1);//需要检验的第二个数
		var result={};
		if(val<=number&&thirdNumber<=breakPoint){
			str=str.substring(0,i)+val+str.substring(i+2,str.length);
			result.index=i+1;
			result.string=str;
		}else if(val==number&&thirdNumber<=another){
			str=str.substring(0,i)+val+str.substring(i+2,str.length);
			result.index=i+1;
			result.string=str;
		}
		else{
			str=str.substring(0,i)+'0'+val+str.substring(i+3,str.length);
			result.index=i+2;
			result.string=str;
		}
		return result;

	}

    当光标位于图三位置时，还是拿月份当例子，如果输入位前面一位满足了小于等于1，然后此时输入9，显然是不行的，所以需要在这里进行限制，当当前位数的前一位数大于等于十位数的最大数并且输入的数大于了个位允许的最大数，则将十位数变为0，然后当前输入的数替换个位数，比如此时input的value是2012-10-12 21:21:21。否则的话就直接替换下一位数，其它的不变。

//当前光标所在位置即输入位置 当前input的value值 所允许的十位数的最大数 当十位数为最大时所允许的个位数的最大数
var specificNum=function(index,string,num,breakPoint){
		var i=index,str=string,number=num,breakPoint=breakPoint;
		var val=str[i]; //当前输入的数
		var result={};
		var frontNumber=str.substr(i-1,1);
		console.log(frontNumber);
		if(frontNumber>=number&&val>breakPoint){
			console.log(str.substring(i+2,str.length));
			str=str.substring(0,i-1)+'0'+val+str.substring(i+2,str.length);
			result.index=i+1;
			result.string=str;
		}else{
			str=str.substring(0,i+1)+str.substring(i+2,str.length);
			result.index=i+1;
			result.string=str;
		}
		return result;
	}

    仔细分析了可以发现，当输入的是天，小时，分钟，秒时也是需要符合上面两种情况的，只是连接符号及十位及个位所允许的最大位数不同，比如天的话，最大允许的十位数是3，最大允许的个位数是9（抱歉，我实在不想判断润年和非闰年以及大小月，因此输入日期的时候默认是可以输入31号的，有兴趣的可以自己在加一下限制），年份的话只需要直接替换下一位，因此调用时代码就只需要调用上面的两个方法：

$tempInput.bind('input propertychange',function(event){
			if(flag==1){
				var val=$(this).val();
				var index=getIndex($(':focus'));
				console.log(index);
				if(index==4){
					var result=specificSymbol(index,val,'-',1,9,2);
				}else if(index==5){
					var result=specific(index,val,1,9,2);
				}else if(index==6){
					var result=specificNum(index,val,1,2);
				}else if(index==7){
					var result=specificSymbol(index,val,'-',3,9,1);
				}else if(index==8){
					var result=specific(index,val,3,9,1);
				}else if(index==9){
					var result=specificNum(index,val,3,1);
				}else if(index==10){
					var result=specificSymbol(index,val,' ',2,9,4);
				}else if(index==11){
					var result=specific(index,val,2,9,4);
				}else if(index==12){
					var result=specificNum(index,val,2,4);
				}else if(index==13||index==16){
					var result=specificSymbol(index,val,':',5,9,9);
				}else if(index==14||index==17){
					var result=specific(index,val,5,9,9);
				}
				else{
					var result={};
					result.string=val.substring(0,index+1)+val.substring(index+2,val.length);
					result.index=index+1;
				}
				$(':focus').val(result.string);
				changeCursorPos($(':focus'), result.index);
				$(this).removeClass('running');
				flag=0;
			}
		});

    最后附上完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
	<input id="test1" name="test1" value="2013-12-06 22:13:55" type='datetime'/>
</div>

<br/>
<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script>
var timeMask=function(obj,len){
		var valueLength=len-1;
		var flag=0,$tempInput=obj;
		$tempInput.bind('keydown',function(event){
			var keyCode=event.keyCode;
			for(var i=96;i<=105;i++){
				if(keyCode==i){
					flag=1;
					break;
				}
			}
			if(flag==0){
				for(var i=48;i<=57;i++){
					if(keyCode==i){
						flag=1;
						break;
					}
				}
			}
			if(flag==1) {
				var index = getIndex($(':focus'));
				if (index >= valueLength) {
					return false;
				}
				if ($(this).hasClass('running')) {
					return false;
				}
				$(this).addClass('running');
			}else{
				return false;
			}
		});

		$tempInput.bind('input propertychange',function(event){
			if(flag==1){
				var val=$(this).val();
				var index=getIndex($(':focus'));
				console.log(index);
				if(index==4){
					var result=specificSymbol(index,val,'-',1,9,2);
				}else if(index==5){
					var result=specific(index,val,1,9,2);
				}else if(index==6){
					var result=specificNum(index,val,1,2);
				}else if(index==7){
					var result=specificSymbol(index,val,'-',3,9,1);
				}else if(index==8){
					var result=specific(index,val,3,9,1);
				}else if(index==9){
					var result=specificNum(index,val,3,1);
				}else if(index==10){
					var result=specificSymbol(index,val,' ',2,9,4);
				}else if(index==11){
					var result=specific(index,val,2,9,4);
				}else if(index==12){
					var result=specificNum(index,val,2,4);
				}else if(index==13||index==16){
					var result=specificSymbol(index,val,':',5,9,9);
				}else if(index==14||index==17){
					var result=specific(index,val,5,9,9);
				}
				else{
					var result={};
					result.string=val.substring(0,index+1)+val.substring(index+2,val.length);
					result.index=index+1;
				}
				$(':focus').val(result.string);
				changeCursorPos($(':focus'), result.index);
				$(this).removeClass('running');
				flag=0;
			}
		});
		

	}
	//根据光标得到当前输入的是第几位
	var getIndex= function(obj){
		var oTxt1 = obj[0];
		var cursurPosition=-1;
		if(oTxt1.selectionStart){//非IE浏览器
			cursurPosition= oTxt1.selectionStart;
		}else{//IE
			var range = document.selection.createRange();
			range.moveStart("character",-oTxt1.value.length);
			cursurPosition=range.text.length;
		}
		return cursurPosition-1;
	}

	var specificSymbol= function(index,string,sym,num,breakPoint,another){
		var i=index,str=string,symbol=sym,number=num,breakPoint=breakPoint,another=another;
		var val=str[i]; //当前输入的数
		var result={};
		var thirdNumber=str.substr(i+3,1);//需要检验的第三个数
		if(val<number&&thirdNumber<=breakPoint){
			str=str.substring(0,i)+symbol+val+str.substring(i+3,str.length);
			result.index=i+2;
			result.string=str;
		}else if(val==number&&thirdNumber<=another){
			str=str.substring(0,i)+symbol+val+str.substring(i+3,str.length);
			result.index=i+2;
			result.string=str;
		}
		else{
			str=str.substring(0,i)+symbol+'0'+val+str.substring(i+4,str.length);
			result.index=i+3;
			result.string=str;
		}
		return result;
	}

	var specific= function(index,string,num,breakPoint,another){
		var i=index,str=string,number=num,breakPoint=breakPoint,another=another;
		var val=str[i]; //当前输入的数
		var thirdNumber=str.substr(i+2,1);//需要检验的第二个数
		var result={};
		if(val<=number&&thirdNumber<=breakPoint){
			str=str.substring(0,i)+val+str.substring(i+2,str.length);
			result.index=i+1;
			result.string=str;
		}else if(val==number&&thirdNumber<=another){
			str=str.substring(0,i)+val+str.substring(i+2,str.length);
			result.index=i+1;
			result.string=str;
		}
		else{
			str=str.substring(0,i)+'0'+val+str.substring(i+3,str.length);
			result.index=i+2;
			result.string=str;
		}
		return result;

	}
	var specificNum=function(index,string,num,breakPoint){
		var i=index,str=string,number=num,breakPoint=breakPoint;
		var val=str[i]; //当前输入的数
		var result={};
		var frontNumber=str.substr(i-1,1);
		console.log(frontNumber);
		if(frontNumber>=number&&val>breakPoint){
			console.log(str.substring(i+2,str.length));
			str=str.substring(0,i-1)+'0'+val+str.substring(i+2,str.length);
			result.index=i+1;
			result.string=str;
		}else{
			str=str.substring(0,i+1)+str.substring(i+2,str.length);
			result.index=i+1;
			result.string=str;
		}
		return result;
	}
	var changeCursorPos= function(obj, pos) {
		var inpObj = obj[0];
		if (inpObj.setSelectionRange) {
			inpObj.setSelectionRange(pos, pos);
		} else {
			console.log('不兼容该方法');
		}
	}
	timeMask($('#test1'),19); 
</script>
</body>
</html>

    最后说一句，我最开始用的keyup事件，这就导致输入时，总是会闪烁，因为keyup触发时，数字已经被输入到input中了，然后又各种苦恼，最后发现用input及IE的propertychange事件可以避免闪烁，因为这个事件时input值发生变化是触发，值变化时改变value的值就不会闪烁啦！

    忽略我的各种取名吧~（笑哭），我也觉得这种卡位数是很笨的办法，有大神有更好的办法的话，求指教！

转载于:https://my.oschina.net/u/3689373/blog/1551239

chuoqinnong5933
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery 将当前时间转换成yyyymmdd格式的实现方法
11-25
如题： function nowtime(){//将当前时间转换成yyyymmdd格式 var mydate = new Date(); var str = "" + mydate.getFullYear(); var mm = mydate.getMonth()+1 if(mydate.getMonth()>9){ str += mm; } else{ str += "0" + mm; } if(mydate.getDate()>9){ str += mydate.getDate(); }
JQ获取当前时间（日期）YY-MM-DD hh:mm:ss
weixin_41760500的博客
07-27 2947
在实际项目中，有时候需要当前时间和过去时间做对比，因此找到了一种方法，经检测可用 //获取当前时间  格式为2018-08-17 20:12:32     function getNowFormatDate() {     var date = new Date();     var seperator1 = "-";     var seperator2 = ":";     var mont...
jquery年月日时分秒控件_jquery 的日期时间控件（年月日时分秒）
weixin_34669755的博客
02-01 213
注：例子中出现的jquery-ui-1.7.3是jquery的插件，包含了日期控件的国际化和一些动画特效，下载地址：http://jqueryui.com/$('#dyStartDateTime').datetimepicker({showSecond: true,changeMonth: true,changeYear: true,timeFormat: 'hh:mm:ss',dateForma...
基于jqUI的日期选择（‘yy-mm-dd’）
weixin_30278237的博客
03-03 99
今天看某公司的网页，其中有个筛选条件是选择一个时间区间，从而选择出符合条件的项。什么也不说了，先看图左边的输入框，点击具体的日期，这里我选择的是2017-3-9，然后右边的输入框就只能选择这个日期以后的了，这点还是非常的人性化的，然后我就追根溯源，找到了这是Jquery Ui的组件。datapicker，这里就不详细的介绍了，菜鸟教程一大堆。我就简单的说一下用法： 　　 1 <...
jQuery输入框超级好用的日期控件
weixin_37778355的博客
01-18 4679
引用： &amp;lt;script type=&quot;text/javascript&quot; src=&quot;~/Areas/HROnboardingInterview/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;link href=&quot;~
jQuery实现简单日期格式化功能示例
12-02
这个日期格式化方法可以处理多种格式，比如"yyyy-MM-dd HH:mm:ss"、"yy/MM/dd"等。这种自定义的日期格式化方法在不使用额外的日期库（如Moment.js）时非常有用，特别是当你只需要基本的格式化功能时。 总的来说，...
jq日期控件可选择时间、日期、星期
01-04
dateFormat: "yy-mm-dd", // 设置日期格式 showWeek: true, // 显示星期 dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"] // 设置星期中文简写 }); }); ``` 为了增加时间选择功能，我们可以使用另一...
jquery中实现时间戳与日期相互转换
11-22
- **从日期字符串转换为时间戳**：`DateToUnix`函数接收一个格式为"YYYY-MM-DD HH:MM:SS"的日期字符串，通过`split()`函数解析日期和时间，然后使用`Date()`构造函数创建日期对象，并计算毫秒值，最后除以1000得到...
layui-laydate时间日历控件使用方法详解
12-12
- `format`: 定义日期时间的显示格式，如'yyyy年MM月dd日 HH时mm分ss秒'。 - `value`: 设置默认值，需要遵循`format`设定的格式。 - `min`和`max`: 设置日期时间的最小值和最大值。 - `trigger`: 自定义弹出控件...
将中国标准时间转化为 yy-mm-dd hh:mm:ss格式
qq_43526066的博客
06-19 2009
如题 let newDate = new Date(new Date() - 24 * 3600 * 1000); function YymmddFormat(newDate) { let Month = newDate.getMonth() + 1; Month = Month >= 10 ? Month : '0' + Month; let d = newDate.get...
JS获取日期yy-mm-dd格式
djun0426的博客
05-05 1014
方法一： var myDate=new Date(); var month = myDate.getMonth() + 1; var Day = myDate.getDate(); var today = ""; if(month<10){ if(Day<10){ today = myDate.getFullYear() + "-0" + month + ...
将时间戳转换成时间yy-MM-dd HH:mm
bin236的博客
07-05 3797
- (NSString *)getDate:(NSString *)date{     long long time=[date longLongValue]; //转成longlong类型     NSDate *d = [[NSDate alloc]initWithTimeIntervalSince1970:time/1000.0];     NSDateFormatter *df
JS日期时间过滤器
qq_39874538的博客
05-26 391
dateFormat(time) { var date=new Date(time); var year=date.getFullYear(); var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1; var day=date.getDate()<10 ...
jsp页面格式时间yy-mm-dd
weixin_34252686的博客
08-03 157
这个问题把我花了1小时都没弄出来 各种报错 还是最后同学告知才知道的。 导入 ：<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fu" %> 显示截取：<td>${fu:substring(p.tabTime,0,10)} </td> 截取0-10位 转载于:https...
YYYY-mm-dd HH:MM:SS大小写解释
热门推荐
Logica的专栏
08-18 2万+
d               月中的某一天。一位数的日期没有前导零。     dd             月中的某一天。一位数的日期有一个前导零。     ddd           周中某天的缩写名称，在   AbbreviatedDayNames   中定义。     dddd         周中某天的完整名称，在   DayNames   中定义。     M         
js中的Date对象 及 将时间戳转换为yy-mm-dd hh:mm:ss格式的方法
http____的博客
07-14 1806
Date 对象用于处理日期和时间。 日期对象是用 创建的。有 4 种方法创建新的日期对象：说明：JavaScript（默认情况下）将以全文本字符串格式输出日期：在 HTML 中显示日期对象时，会使用 toString() 方法自动转换为字符串。 注意： 使用构造函数（ ）创建是对象类型 使用函数创建是字符串类型......
JS 判断input输入框日期时间格式是否符合YY-MM-DD HH:MM:SS和是否符合实际日期规范方法以及SQL时间日期格式转化存储
记HTML5 JS jquery 关于给自画页面传值问题
04-19 3712
JS 判断input输入框日期时间格式是否符合YY-MM-DD HH:MM:SS和是否符合实际日期规范方法以及SQL时间日期格式转化存储 先获取input文本框内输入值 <p>日 &nbsp &nbsp &nbsp 期：&nbsp;<input type="text" id="Edit_d_DateTime" name="Edit_d_DateTi...
当前时间转换为yy-mm-dd hh:mm:ss格式
weixin_47144417的博客
01-01 881
当前时间转换为yy-mm-dd hh:mm:ss格式 //补零方法 add0(m) { return m < 10 ? "0" + m : m; }, // new Date() 获取当前时间 getNowTime() { let time = new Date(); console.log(time); // Fri Jan 01 2021 19:58:01 GMT+0800 (中国标准时间) var y = time.
时间戳转中国人能看得懂的日期格式 yy-mm-dd
weixin_30655569的博客
04-24 162
很多项目都会用到时间戳的转换 说实话 我现在的这家公司超级好 因为后太要求传数据的时候竟然可以是时间戳的格式 我觉得我好幸福 哈哈哈 不过 等后台转给你数据的时候很多时候都是时间戳 这时候就得前端转了（因为后太转很麻烦） 每次用每次找 很烦 于是乎 我决定直接放在自己的园子里 跟往常一样 还是图片 因为粘贴文字太丑了 放心本宝会在评论中粘出来 哇咔咔 我太伟大了 转载于:...
JQ长字符串转化为yyyy-MM-dd日期格式
最新发布
05-13
假设JQ中的长字符串形如 "20211231"，可以使用如下代码将其转换为 yyyy-MM-dd 的日期格式： ```javascript var dateString = "20211231"; var year = dateString.substring(0, 4); var month = dateString....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值