以 “日” 为单位的可以翻页的效果 显示为 2016/01/11

先上效果图：

动作和“周”是一样的，步骤简化，：

一、日期容器html

<!--日期的容器-->
        <div class="headerDiv">
            <div id="previousDiv" class="previousImgDiv"></div>
            <div id="nextDiv" class="unNextImgDiv" ></div>
            <div id="headerTitleDiv" class="titleDiv"><input id="title" type="date" style="background-color:#f0f0f0;border:none;font-size: 20px;text-align:center;margin-left: 15%;"/></div>
        </div>

注意：“日”的input的类型为date

二、JS方法，“日”的变量与方法与“周不一样”

1、变量自定义

var previousDiv;
var nextDiv;
var headerTitleDiv;
var title;

2、延迟加载

$(document).ready(function(){     

previousDiv = document.getElementById('previousDiv');
nextDiv = document.getElementById('nextDiv');
headerTitleDiv = document.getElementById('headerTitleDiv');

title = document.getElementById('title');

//title的日期转换为自定义日期格式
title.value = convertDateStr(new Date());
//title的input事件
$(title).on('input', function(){
  if(this.value.length == 0){
    this.value.length == convertDateStr(new Date());
  }else{
    if(checkCanDoNext()){
    fetchDate();
    return;
    }
  }
});
}

3、所有日期方法

/**
 * 以下为自定义日期方法
 * 
 * 前一页的单击事件
 * 后一页的单击事件
 * 自定义格式化日期的方法
 * 判断日期返回的个数
 * 判断下一页是否可点击
 * 判断当前日期是否小于指定日期，结果为true
 * 重置下一页的监听事件
 * 设置上一页的日期
 * 设置下一页的日期
 */

function resolveData (data) {
    for (var i = 0; i < data.length; i++) {
        insertULChild(convertHTML(data[i],i));
        buildRadarReport(tmpReportDivName + i,data[i]);
    };
}

function convertHTML (data,index) {
    var tmpMore;
    return tmpHTML.replace('%reportDivId',tmpReportDivName + index)
    .replace('％num',index+1+"")
    .replace('%name',data.name)
    .replace('%category',data.role)
    .replace('%status',data.verificationStatus);
}


//前一天的单击事件
function previousDivTapEvent(){
    resetNestEvent();
    nextDiv.className = 'nextImgDiv';
    title.value = getPreviousDate(title.value);
    fetchDate();
    fetchDate2();
}

//后一天的单击事件
function nextDivTapEvent(){
    title.value = getNextDate(title.value);
    if(checkCanDoNext){
        fetchDate();
        fetchDate2();
        nextDiv.removeEventListener('tap', nextDivTapEvent);
        return;
    }
    fetchDate();
    fetchDate2();
}

/**
 * 格式化日期 显示为样式为2016-1-8，参数为date
 * @param  date
 */
function convertDateStr(date){
    var currentDate = date;
    var year = currentDate.getFullYear();
    var month = getLength2(currentDate.getMonth() + 1);
    var day = getLength2(currentDate.getDate());
    return year+"-"+month+"-"+day;
}

/**
 * 判断月和日的返回个数，参数为number
 * 如果小于10 number < 10，就返回数前加0  如返回为9，显示为09
 * 如果大于10 ?否则  返回数不加任何数字  如返加为11，就显示11
 */

function getLength2(number){
    return number < 10 ? "0" + number : number + "";
}
//获取上一页的日期
function getPreviousDate(date){
    var currentDate = Date.parse(date);
    currentDate = currentDate - 1000 * 60 * 60 * 24;
    var tmpDate = new Date();
    
    tmpDate.setTime(currentDate);
    return convertDateStr(tmpDate);
}
//获取下一页的日期
function getNextDate(date){
    var currentDate = Date.parse(date);
    currentDate = currentDate + 1000 * 60 * 60 * 24;
    var tmpDate = new Date();
    
    tmpDate.setTime(currentDate);
    return convertDateStr(tmpDate);
}
//判断下一页是否可以点击
function checkCanDoNext() {
    if (checkDate(title.value)) {
        title.value = convertDateStr(new Date());
        nextDiv.className = 'unNextImgDiv';
        nextDiv.removeEventListener('tap', nextDivTapEvent);
        return true;
    } else {
        resetNextEvent();
        nextDiv.className = 'nextImgDiv';
        return false;
    }
}
//判断当前日期是否小于指定日期
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;
}
//重置下一页的监听事件
function resetNestEvent(){
    nextDiv.removeEventListener('tap',nextDivTapEvent);
    nextDiv.addEventListener('tap', nextDivTapEvent);
}

 class样式请参考：http://www.cnblogs.com/baiyygynui/p/5124575.html