原生JS实现左右箭头选择日期实例代码

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

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

<div>
  <span class="leftspan" <span style="color:#FF0000;">onclick="reducedate()"</span>><img src="IMG/return.png" style="height:100％; width:100％;"/></span>
  <label id="beginTime" class="kbtn"></label>
  <span class="rightspan" <span style="color:#FF0000;">onclick="adddate()"</span>><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;
 } //如果是闰年2月 日期就加一
 else {
 date = 1;
  mouth = mouth +1;
 } //不是闰年2月 日期就变为1 月份加一
}
}else if(date == 29){ //当日期为29号是 也是判断是否是2月
switch(mouth)
{
 case 2:
 date = 1;
 mouth = mouth +1;
} //当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吧：

向左尖括号（减少时间）

<span style="color:#FF0000;">onclick="reducedate("tagid")";
/span>

向右尖括号（增加时间）

<span style="color:#FF0000;">onclick="adddate()("tagid")";
/span>

代码可复制到自己的JS中，也可插入。

以上所述是小编给大家介绍的原生JS 左右箭头选择日期实例代码，希望对大家有所帮助！

来源：http://blog.csdn.net/sinat_16463137/article/details/61925606