以 “月” 为单位的可以翻页的效果 显示为 2016年01月

先上效果图：

 

动作：向前翻一页，显示为 201年12月；向后翻一页，显示为  2016年1月

动作2：日期与数据关联

 

previousDiv  上一页ID

nextDiv      下一页ID

headerTitleDiv    日期容器ID   

日期是需要放在input里的， ID为title

html：

<!--图表的容器-->
        <div id="scroll_view" class="mui-scroll-wrapper" style="top:44px">
            <div id="warp" class="mui-scroll">
                <div id="emptyDiv" class="emptyDiv" style="display: none;">暂无数据</div>
                <div id="pie_information_month" class="ReportDiv"></div>
                <div id="bar_information_month" class="ReportDiv"></div>
            </div>
        </div>

注意：“月”的input的类型为month

下面是JS部分：

1、重置上一页的监听事件并给DIV添加样式

function resetPreviousEvent(){
    previousDiv.className = 'previousImgDiv';
    previousDiv.removeEventListener('tap',previousDivTapEvent);
    previousDiv.addEventListener('tap',previousDivTapEvent);
}

2、重置下一页的监听事件并给DIV添加样式

function resetNextEvent(){
    nextDiv.className = 'nextImgDiv';
    nextDiv.removeEventListener('tap',nextDivTapEvent);
    nextDiv.addEventListener('tap',nextDivTapEvent);
}

3、上一页的监听事件及事件中调用数据

function previousDivTapEvent(){
    resetNestEvent();
    title.value = getPreviousDate(title.value);
    fetchDate1();
}

4、下一页的监听事件及事件中调用数据,判断，如果下一页有数据，则为下一页添加监听事件，否则，不操作

function nextDivTapEvent(){
    title.value = getNextDate(title.value);
    fetchDate1();
    if(checkCanDoNext()){
        nextDiv.addEventListener('tap',nextDivTapEvent);
        return;
    }
}

5、返回自定义日期

1. 定义当前日期，并赋值,为系统时间
2. 定义当前年份，并从系统时间中获取年份
3. 定义当前月份，并从系统时间中获取当月天数，如果为31天，则加1；并给获取到的月份的返回值做判断，如果小于10，则在月前加0
4. 返回  2016年01月的格式

function convertDateStr(date){
    var currentDate = date;
    var year = currentDate.getFullYear();
    var month = getLength2(currentDate.getMonth()+1);
    return year+"-"+month;
}

6、获取上一月并返回

1. 定义当前日期，当前日期从系统时间中返回
2. 返回一个新的日期，这个日期为上一页的日期
3. 为新的日期设置当前日期
4. 为新的日期设置当前返回的上一月的月份，需要从当前月份中   -1
5. 返回当前日期为上一页的新日期

function getPreviousDate(date){
    var currentDate = Date.parse(date);
    var tmpDate = new Date();
    tmpDate.setTime(currentDate);
    tmpDate.setMonth(tmpDate.getMonth()-1);
    return convertDateStr(tmpDate);
}

7、获取下一月并返回

1. 方法同上，区别是，在当前日期   +1

function getNextDate(date){
    var currentDate = Date.parse(date);
    var tmpDate = new Date();
    tmpDate.setTime(currentDate);
    tmpDate.setMonth(tmpDate.getMonth()+1);
    return convertDateStr(tmpDate);
}

8、判断，当前日期是否小于指定日期，这个指定日期就是上一页或者是下一页，返回布尔值

1. 如果当前日期小于指定日期，则为true

function checkDate(dateStr){
    var currentDate = new Date();
    var selectDate = Date.parse(dateStr);
    var tmpDate = new Date();
    tmpDate.setTime(selectDate);
    var currentDateCount = currentDate.getFullYear()*100 + currentDate.getMonth();
    var selectDateCount = tmpDate.getFullYear()*100 + tmpDate.getMonth();
    return currentDateCount <= selectDateCount;
}

9、判断，当前页是否可以点击下一页，并打开下一页数据

function checkCanDoNext(){
    if(checkDate(title.value)){
        title.value = convertDateStr(new Date());
        nextDiv.className = 'nextImgDiv';
        nextDiv.removeEventListener('tap',nextDivTapEvent);
        return true;
    }else{
        resetNestEvent();
        nextDiv.className = 'nextImgDiv';
        return false;
    }
}

10、重置监听下一页事件

function resetNestEvent(){
    nextDiv.removeEventListener('tap',nextDivTapEvent);
    nextDiv.addEventListener('tap',nextDivTapEvent);
}

共有10步，如果哪位大侠可以有比这个更简单的方法，可以在下面留言，供大家参考，谢谢

上一页与下一页用到的CLASS样式：

.previousImgDiv{
    position: relative;
    float: left;
    height:30px;
    width: 30px;
    top:7px;
    left:8px;
    background-image: url('../../img/integral_active/icon_previous.png');
    -moz-background-size:100% 100%;
    background-size:100% 100%;
}

.nextImgDiv{
    position: relative;
    float: right;
    height:30px;
    width: 30px;
    top:7px;
    right:8px;
    background-image: url('../../img/integral_active/icon_next.png');
    -moz-background-size:100% 100%;
    background-size:100% 100%;
}

.titleDiv{
    position: relative;
    width: 200px;
    margin: auto;
    height: 44px;
    line-height: 44px;
    vertical-align: middle;
    text-align: center;
    color:#787A7F;
}

.emptyDiv{
    position:absolute;
    margin:auto;
    height:350px;
    width:100%;
    text-align:center;
    line-height:300px;
    display: none;
}