仿“铁友”类似于时间轴的日期选择工具
-
先上图片
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天
