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

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

原生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 左右箭头选择日期实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2017-03-12

Js日期选择自动填充到输入框(界面漂亮兼容火狐)

复制代码 代码如下: <html> <head> <title>很漂亮.兼容火狐的Js日期选择,自动填充到输入框</title> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <style type="text/css"> body{font-size:12px;font-family:

js实现点击文本框显示日期选择器特效代码分享

为大家分享的JavaScript图片轮播代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js点击文本框显示日期选择器</title> <link type="text/css" rel="stylesheet" href="calen

带左右箭头图片轮播的JS代码

轮播图实现效果见下图,图片能自己轮播,点击左右按钮进行翻页轮播,鼠标悬停图片或者标题上,停止轮播: 效果图为: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/19

Js日期选择器并自动加入到输入框中示例代码

复制代码 代码如下: <html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <script type="text/javascript"> var gMonths=new Array("一月&

Ext JS 4实现带week(星期)的日期选择控件(实战一)

前言 Ext JS 3 和 Ext JS 4中都有提供日期选择的组件(当然早期版本也有). 但是有一些日期选择的需求是要看到星期,就是日期中的哪一天是这一年的第几周. 遗憾的是Ext js 并没有提供这样的配置. (针对Ext js 4来说,理想的相法是在Ext.picker.Date有一个 类似showWeek这样的配置项) 现有的解法 到网络上去看看基于Ext js 的解法:有找到两个 http://enikao.net/extjs/weeknumber/weeknumber.html 和

JS日期和时间选择控件升级版(自写)

鉴于网上找到的几个日期选择程序有些问题,遂着手重写一个程序,大部分还是借鉴前人的代码,添加了时间选择功能,隐藏会遮挡控件的标签select,object. 开始本想使用window.createPopup()来弹出日历的选择,这样就可以跨过任何标签. 不过做到中途发现用createPopup窗口实现理论上是行不通的: 一是因为不在窗体里单击任何地方都会关闭窗口,而当用下拉框选择年份时,很有可能会单击到窗体外的地方,当然这个可以自己写select来避免,但是比较麻烦: 二是窗体的宽度和高度只能在弹

javascript 日期联动选择器 [其中的一些代码值得学习]

DateSelector body { margin: 0px; padding: 0px; font-size: 12px; } #year, #month, #date{ width: 60px; margin-right: 3px; } var $ = function(id) { return 'string' == typeof id ? document.getElementById(id) : id; }; var Extend = function(destination, so

javascript 日期相减-在线教程(附代码)

代码如下: <SCRIPT LANGUAGE="JavaScript"> <!-- //说明:这里用了Math.ceil()函数,向上取整,即零头算一天,^_^ var strDate1 = "2003-06-17 03:03:40.0"; var strDate2 = "2004-09-18 12:03:12.0"; strDate1=strDate1.substring(0,strDate1.lastIndexOf(&quo

iOS三级联动选择器的实现代码示例

无聊ing...封装个省市区三级联动选择器的小demo吧. 上家公司的三级地区选择器的数据是一次性通过网络请求就能获取到的,但新东家这边并不是,而是先选择了省获取省的Id再去获取市,再通过得到市的Id获取区域,show code之前,先看下需要考虑的几个点: 1)怎么设置默认值,关键代码 [self.pickerView selectRow:xxx inComponent:xxx animated:YES]; 2)怎么让三级之间联动 ,关键代码 复制代码 代码如下: [self pickerVi

基于javascript bootstrap实现生日日期联动选择

本文实例为大家分享了js实现日期联动选择的相关代码,适用于生日的选择,供大家参考,具体内容如下 实现目标:年月日三个select 输入框,以及一个hidden的input,通过js获取input的值,如果有值切是日期格式,年月日select为input中的时间.否则为空.年默认区间段为1900年到当今年份 本人使用了bootstrap,class请参照bootstrap的相关说明 下面是html 内容: <div class="col-sm-9"> <label cl

jQuery实现日期联动效果实例

本文实例讲述了jQuery实现日期联动效果的方法.分享给大家供大家参考,具体如下: 实现目标: 两个日期,有下拉框: <head> //导入jquery地址 <script src="jquery-1.7.2.min.js" language="JavaScript" type="text/javascript"></script> <script type="text/javascript&q

省市联动效果的简单实现代码(推荐)

下拉框二级联动效果在日常应用场景中经常会碰到,尤其是涉及地区.品种等有多级选项时.例如:常见的省市联动下拉框,在选择省份时,城市列表也会更随改变. 思路: 1,所谓联动效果,是指出发父级的数据变化时,会影响到关联性子级数据元素的变化. 下面是造的省市的数据: var linkDatas = { provinces:[ { "code":"0", "name":"请选择" }, { "code":"

javascript日期格式化方法小结

本文实例总结了javascript日期格式化方法.分享给大家供大家参考,具体如下: 采用Prototype: Date.prototype.Format = function (fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": t

javascript日期处理函数,性能优化批处理

其实网上写javascript日期格式化的博文很多,大体都看了看,都还不错.唯一遗憾的是只顾着实现了功能,没对函数进行性能优化. 俗话说:不要重复造轮子.google上找了一个比较不错的日期格式化函数,来开始我的优化之旅吧! google上找的这个日期函数化函数,估计大家都很眼熟,以前我也一直在用.先看看优化后和优化前的效率对比吧! 1.优化之前的toDate函数(字符串转换成Date对象),重复执行1万次,耗时660毫秒 2.优化之前的dateFormat函数(Date对象格式化成字符串),重

javascript 日期常用的方法

1:经常涉及到日期的换算比较: 复制代码 代码如下: <html> <head> <title></title> <script language="javascript"> function returnMaxDate(){ var datevalue1 = document.getElementById("date1").value; var datevalue2 = document.getEleme

JavaScript日期对象(Date)基本用法示例

本文实例讲述了JavaScript日期对象(Date)基本用法.分享给大家供大家参考,具体如下: 1.获取当前日期: document.write("Current time: "+new Date()); 2.获取时间戳(毫秒): document.write(new Date().getTime()); 3.设置年月日(年为必选,月日为可选): var d = new Date(); d.setFullYear(2016,3,16) document.write(d); docum