仿铁友时间轴选择

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

• 先上图片
  

  

  zhou.png

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

      
  
    
    
      
     
        
   
        
   
        
  
         
  01-11
  周一
  
         
  01-12
  周二
         
  01-13
  周三
         
  01-14
  周四
         
  01-15
  周五
         
  01-16
  周六
         
  01-17
  周日
        
      
    
      
  

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