仿铁友时间轴选择

仿“铁友”类似于时间轴的日期选择工具

• 先上图片
  

  zhou.png

• 话不多说，先上代码
  html部分

    <!-- 日期开始 -->  
  
    <div class="container mar-bottom-15 ">  
      <div class=" bor-solid-1" style="     background:#EFF2F5;">   
        <div class="arrow-left" id="prev"><a href="#" style=""> </a></div>
        <div class="arrow-right" id="next"><a href="#" style=""> </a></div>
        <ul class="nav nav-tabs nav-justified ">
         <li role="presentation"><a href="#" id="3_presentTime">01-11<br>周一</a></li><!--这里的01-11没有什么实际意义  -->
         <li role="presentation"><a href="#" id="2_presentTime">01-12<br>周二</a></li>
         <li role="presentation"><a href="#" id="1_presentTime">01-13<br>周三</a></li>
         <li role="presentation" class="active"><a href="#" id="presentTime">01-14<br>周四</a></li>
         <li role="presentation"><a href="#" id="presentTime_1">01-15<br>周五</a></li>
         <li role="presentation"><a href="#" id="presentTime_2">01-16<br>周六</a></li>
         <li role="presentation"><a href="#" id="presentTime_3">01-17<br>周日</a></li>
        </ul>
      </div>
    </div>
    <!-- 日期结束 -->  
  

js部分

 $(function(){
    var gotime = $('#goTime').val();//获取用户乘车的始发时间
 var presentTime = gotime.substring(5);//substring截取后五个字符
 var weekArray = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六","星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");

 //构造Format函数
 Date.prototype.Format = function (fmt) {  
  var o = {  
            "M+": this.getMonth() + 1, //月份   
            "d+": this.getDate(), //日   
            "h+": this.getHours(), //小时   
            "m+": this.getMinutes(), //分   
            "s+": this.getSeconds(), //秒   
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度   
            "S": this.getMilliseconds() //毫秒   \};  

    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));  
    for (var k in o)  
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));  
    return fmt;  
}

//day表示在当前时间内要增加的天数
function Day(day){
var date = new Date(gotime);
date.setDate(date.getDate() + day);
return date.Format("MM-dd");//利用Format函数输入日期
}  

$('#1_presentTime').html(Day(-1)+'<br>'+weekArray[new Date(gotime).getDay()+6]);
$('#2_presentTime').html(Day(-2)+'<br>'+weekArray[new Date(gotime).getDay()+5]);
$('#3_presentTime').html(Day(-3)+'<br>'+weekArray[new Date(gotime).getDay()+4]);
$('#presentTime_1').html(Day(1)+'<br>'+weekArray[new Date(gotime).getDay()+1]);
$('#presentTime_2').html(Day(2)+'<br>'+weekArray[new Date(gotime).getDay()+2]);
$('#presentTime_3').html(Day(3)+'<br>'+weekArray[new Date(gotime).getDay()+3]);
$('#presentTime').html(presentTime+'<br>'+weekArray[new Date(gotime).getDay()]);

 $('.nav-tabs li a').click(function(){//单击任何一个日期都会进行相应的跳转
 var Year = new Date();
 var timeString = $(this).html();
 var timepice = timeString.slice(0,5);
 location.href="TicketInfo.jsp?chufaTime="+Year.getFullYear()+'-'+timepice+"&trainId=<%=request.getParameter("trainId")%>&chufadi=<%=request.getParameter("chufadi")%>&mudidi=<%=request.getParameter("mudidi")%>&ticketType=<%=request.getParameter("getSoftType")%>";
// $(this).attr('href','TicketInfo.jsp?chufaTime='+Year.getFullYear()+'-'+timepice);
 //alert(timepice);
 });
 
 $('#prev').click(function(){   //后退七天
 var Year = new Date();
 var timepice2 = Day(-7);
 location.href="TicketInfo.jsp?chufaTime="+Year.getFullYear()+'-'+timepice2+"&trainId=<%=request.getParameter("trainId")%>&chufadi=<%=request.getParameter("chufadi")%>&mudidi=<%=request.getParameter("mudidi")%>&ticketType=<%=request.getParameter("getSoftType")%>";
 });
 
 $('#next').click(function(){   //前进七天
 var Year = new Date();
 var timepice2 = Day(7);
 location.href="TicketInfo.jsp?chufaTime="+Year.getFullYear()+'-'+timepice2+"&trainId=<%=request.getParameter("trainId")%>&chufadi=<%=request.getParameter("chufadi")%>&mudidi=<%=request.getParameter("mudidi")%>&ticketType=<%=request.getParameter("getSoftType")%>";
 });
   
})  

代码完全拿过来复制粘贴是不好用的，主要还是要靠大家理解，这个项目最终完成后我会上传到我的github上，欢迎大家fork。

其中关键技术涉及
1、根据当前时间判定星期

var weekArray = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六",  "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");   

alert(weekArray[new Date(2017-05-12).getDay());

2、指定时间向前增加3天，向后增加3天
3、点击任意一天，跳转当前时间为指定时间
4、点击prev和next按钮分别向前和向后跳转7天