原生JS 左右箭头选择日期

先上个效果图,就是用左右尖括号可改变中间日期的值。(点击中间显示区域有时间选择器弹框,用的插件就不说了,主要说自己原创的部分)

                                                                        


HTML部分 (左右箭头都是用的图片素材,网上一大把,这里我就显示我本地地址了)

 <div>
            <span class="leftspan" οnclick="reducedate()"><img src="IMG/return.png" style="height:100%; width:100%;"/></span>
            <label id="beginTime" class="kbtn"></label>
            <span class="rightspan" οnclick="adddate()"><img src="IMG/right.png" style="height:100%; width:100%;"</span>
 </div>  

HTML部分没什么可说的

下面原生JS部分了(底部有本插件附件,欢迎各路朋友评论交流)

function adddate(){
	
	//向右跳转时间(加时间)的按钮
	var s = document.getElementById("beginTime").innerHTML;
	
	var arr = s.split("/"); //将获取的数组按“/”拆分成字符串数组
	
	var year = parseInt(arr[0]);//开分字符串数组的第一个地址的内容是年份
	var mouth = parseInt(arr[1]);//开分字符串数组的第二个地址的内容是月份
	var date = parseInt( arr[arr.length-1]);//开分字符串数组的第三个地址的内容是日期
	
	if(date == 28){//当日期为28号时 只判断是否是2月
		switch(mouth)
		{
			  case 2:
				  if(year % 4 == 0 && year % 100 !=0 || year%400 ==0){
					  date = date +1;
					  break;
					  //如果是闰年2月 日期就加一
					 } else{
						  date = 1;
					     mouth = mouth +1; 
					     break;
					 //不是闰年2月 日期就变为1 月份加一
						 }
			  default:
					date = date +1;
					break;
						 //其他月份默认日期加一
		}
		
	}else if(date == 29){ //当日期为29号是 也是判断是否是2月
		switch(mouth)
		{
			  case 2:
				   date = 1;
				   mouth = mouth +1;
				   break;
			  default:
				   date = date +1;
				   break;
		} //当29号出现必定是闰年 日期变为1 月份加一 其他月份默认日期加一
		
	}else if(date == 30){ //当日期为30 时
			 switch(mouth)
			   {
					case 1:
					case 3:
					case 5:
					case 7:
					case 8:
					case 10:
					case 12: 
						 date = date +1;
						 break; //这些月份的时候一个月有31天 到30的时候再加一
					case 4:
					case 6:
					case 9:
					case 11: 
						 date = 1;
						 mouth = mouth +1;
						break; //这些月份的时候一个月有30天 到30的时候 日期变为1 月份加一
					
			   }
	   }else if(date == 31){
		   
			 switch(mouth)
			   {
					case 1:
					case 3:
					case 5:
					case 7:
					case 8:
					case 10:
						 date = 1;
						 mouth = mouth+1;
						 break; //这些月份的时候一个月有31天 到31的时候  日期为1月份加一
					case 12: 
						 date = 1;
						 mouth = 1;
						 year = year+1;;
						 break;  //十二月 的 31 号 日期变为一 月份变为一 年份加一
										
			   }
	   }else{
		   date +=1;
		   }
	
	document.getElementById("beginTime").innerHTML = year+"/"+mouth+"/"+date;

	}
	
	
function reducedate(){
	//向左跳转时间(减时间)的按钮
	var s = document.getElementById("beginTime").innerHTML;
	
	var arr = s.split("/"); //将获取的数组按“/”拆分成字符串数组
	
	var year = parseInt(arr[0]);//开分字符串数组的第一个地址的内容是年份
	var mouth = parseInt(arr[1]);//开分字符串数组的第二个地址的内容是月份
	var date = parseInt( arr[arr.length-1]);//开分字符串数组的第三个地址的内容是日期
	
	if(date == 1){//当日期为1时,再剪就会改变月份,甚至年份
		switch(mouth){
			case 1:
			     date = 31;
				 mouth = 12;
				 year = year-1;
				 break;  //一月一日 再剪一天 年份减一 月份为12 日期为31
		    case 2:
			case 4:
			case 6:
			case 8:
			case 9:
			case 11:
			     date = 31;
				 mouth = mouth-1;
				 break; //这些月一日 再剪一天  月份减一 日期为31
			case 3:
			      if(year % 4 == 0 && year % 100 !=0 || year%400 ==0){
					  date = 29;
					  mouth = mouth -1;
					 }else {
						 date = 28;
						 mouth = mouth -1;
						 }
			       break; //三月一日 再剪一天  月份减一 日期为根据是否是闰年来判断 日期
			case 5:
			case 7:
			case 10:
			     date = 30;
				 mouth = mouth -1;
			     break; //这些月一日 再剪一天  月份减一 日期为30
			}
		}else{
			date = date-1;
			}
	
	document.getElementById("beginTime").innerHTML = year+"/"+mouth+"/"+date; //拼接字符串插入到标签中
	
	}
	


写个使用API吧:
向左尖括号(减少时间)
 οnclick="reducedate("tagid")";

向右尖括号(增加时间)

 οnclick="adddate()("tagid")"; 
代码可复制到自己的JS中,也可插入。

附件在下面了


PS:很长时间没写博客了,以后会把我觉得好的原创都分享出来。希望在博客上也能交到技术上的朋友。

发布了4 篇原创文章 · 获赞 7 · 访问量 2万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览