小编给大家分享一下原生JS如何实现左右箭头选择日期，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
创新互联建站是一家集网站建设,蓬江企业网站建设,蓬江品牌网站建设,网站定制,蓬江网站建设报价,网络营销,网络优化,
蓬江网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
先上个效果图，就是用左右尖括号可改变中间日期的值。（点击中间显示区域有时间选择器弹框，用的插件就不说了，主要说自己原创的部分）
HTML部分 (左右箭头都是用的图片素材，网上一大把，这里我就显示我本地地址了)
onclick="reducedate()">
onclick="adddate()">
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吧：
向左尖括号（减少时间）
onclick="reducedate("tagid")";
/span>
向右尖括号（增加时间）
onclick="adddate()("tagid")";
/span>
代码可复制到自己的JS中，也可插入。
以上是“原生JS如何实现左右箭头选择日期”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联网站建设公司行业资讯频道！
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
分享标题：原生JS如何实现左右箭头选择日期-创新互联
文章网址：
http://cdkjz.cn/article/cejoph.html
