手动编写移动端横向滚动日历

 

function showTime() {
var show_day = new Array('日', '一', '二', '三', '四', '五', '六');
var time = new Date(new Date(new Date(new Date("2018/02/20").toLocaleDateString()).getTime() - 86400000).valueOf()); //获取零点，减去86400000是需求需要
var year = time.getFullYear(); //年
var month = time.getMonth() + 1; //月
var date = time.getDate(); //日
var day = time.getDay(); //星期几
month < 10 ? month = '0' + month : month;
date < 10 ? date = '0' + date : date;
var currentYear = "<div class='left first'><p>" + year + '年' + "</p><p>" + month + '月' + "</p></div>";
//当前日期
var startTime = year + "/" + month + "/" + date;
//第十四天时间戳
//var lastTimeStamp = new Date(startTime).getTime() + 14 * 24 * 60 * 60 * 1000;
//第十四天时间
//var lastTime = new Date(lastTimeStamp);
var canStamp = new Array();
var calendar = new Array();
var dataRule = new Array();

function ifAddMonth(time) {
var obj = {};
if (new Date(time).getTime() == new Date(time).setDate(1)) {
obj.addMonth = "addMonth";
obj.month = new Date(new Date(time).setDate(1)).getMonth() + 1;
obj.year = new Date(new Date(time).setDate(1)).getFullYear()
} else {
obj.addMonth = "";
obj.month = new Date(time).getMonth() + 1;
obj.year = new Date(time).getFullYear();
}
return obj;
}
for (var i = 1; i < 15; i++) {
canStamp[i] = new Date(new Date(startTime).getTime() + i * 24 * 60 * 60 * 1000);
dataRule[i] = canStamp[i].getFullYear() + '/' + (canStamp[i].getMonth() + 1) + '/' + canStamp[i].getDate();
var calday = canStamp[i].getDate();
calday < 10 ? calday = '0' + calday : calday;
calendar[i] = "<li data-rule='" + dataRule[i] + "' class='" + ifAddMonth(canStamp[i]).addMonth + "' data-year = '" + ifAddMonth(canStamp[i]).year + "' data-month='" + ifAddMonth(canStamp[i]).month + "'><p>" + show_day[canStamp[i].getDay()] + "</p><p>" + calday + "</p></li>"
}
$(".nowTime").html(currentYear);
$(".headDate").append(calendar.toString().replace(/,/g, ""));
if (!!$(".addMonth").data()) {
var newYear = $(".addMonth").data("year"),
newMonth = $(".addMonth").data("month");
$(".addMonth").before("<li class='left second' data-year='" + newYear + "'><p>" + newYear + '年' + "</p><p>" + newMonth + '月' + "</p></li>");
}
}

$(function () {
showTime();
var newYear = $(".addMonth").data("year"),
newMonth = $(".addMonth").data("month"),
oldYear = new Date($(".headDate li").eq(0).data("rule")).getFullYear(),
oldMonth = new Date($(".headDate li").eq(0).data("rule")).getMonth() + 1,
startX, startY, moveEndX, moveEndY, X, Y;
$(".headDate").on("touchmove", function (e) {
$(".nowTime").css("position", "fixed")
if (!!$(".second").data("year")) {
if ($(".second").offset().left < 0) {
$(".nowTime").find("p").eq(0).text(newYear + "年").end().eq(1).text(newMonth > 10 ? newMonth : "0" + newMonth + "月");
} else {
$(".nowTime").find("p").eq(0).text(oldYear + "年").end().eq(1).text(oldMonth > 10 ? oldMonth : "0" + oldMonth + "月");
}
}

});
$(".headDate li").on("click", function () {
date = $(this).data("rule");
vm.mounted();
});

$(".listBox").on("touchstart", function (e) {
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});

$(".listBox").on("touchend", function (e) {
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
if (Y < 0) { //上滑
$(".nowTime").css("position", "static");
} else if (Y > 0) { //下滑
$(".nowTime").css("position", "fixed");
}
})

$(".listBox").on("touchmove", function (e) {
$(".nowTime").css("position", "static");
})
})

html部分：

    <div class="head">
<div class="nowTime">

</div>
<ul class="headDate">
</ul>
</div>

less部分：
.head{
width: 100%;
overflow-x: scroll;
position: relative;
height: 5rem;
}
.nowTime{
height: 5rem;
width: 5rem;
float: left;
position: fixed;
left: 0;
top: 0;
z-index: 9;
background-color: #5aa5f0;
color: #fff;
text-align: center;
padding-left: 3%;
p{
width: 5rem;
height: 2.5rem;
line-height: 2.5rem;
text-align: center;
}
:nth-child(1){
line-height: 3rem;
}
:nth-child(2){
line-height: 2rem;
}
}
.headDate{
display: block;
width:auto;
// height: 107px;
height: 5rem;
text-align: center;
background-color: #5aa5f0;
word-wrap: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
overflow-x: scroll;
color: #fff;
padding-left:3%;
padding-right: 3%;
margin: 0 ;
width: 230%;
position: absolute;
left: 5rem;
top: 0;
li{
// width: 100px;
// height: 107px;
height: 5rem;
width: 5rem;
display: block;
float: left;
p{
// width: 100px;
// height: 53.5px;
// line-height: 53.5px;
width: 5rem;
height: 2.5rem;
line-height: 2.5rem;
text-align: center;
}
:first-child{
line-height: 3rem;
}
:last-child{
font-size:1.8rem;
line-height: 2rem;
}
&.first{
position: fixed;
left: 0;
top: 0;
}
// &.second{
// position: fixed;
// left: 0;
// top: 0;
// }
}
.dataClick{
background-color: #fff;
color: #5aa5f0;
}

}