php日期选择器表单原生代码,原生JS实现左右箭头选择日期实例代码

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

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

οnclick="reducedate()">

οnclick="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吧：

向左尖括号(减少时间)

οnclick="reducedate("tagid")";

/span>

向右尖括号(增加时间)

οnclick="adddate()("tagid")";

/span>

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

以上所述是小编给大家介绍的原生JS 左右箭头选择日期实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！