自己用js寫的兩個日歷控件

前一陣寫了兩個日歷控件，做了簡單的封裝，發出來共朋友們參考。
源碼鏈接:https://github.com/yfsmooth/calendar

第一個日歷控件，條狀的日歷。

(使用方法:調用initBarTime(id,evn)，第一個參數是要渲染div的id，第二個參數是點擊日期發生的事件)

html思路分析:
首先我們看出來這個日歷分為兩個部分
第一部分是上面，整體的你去年月日日期的顯示。
第二部分是下面，具體某一天以及星期的日期顯示。
第三部分是下面兩段的左右箭頭，以及滾動功能。

上面年月日部分的日期我們用一個 p 標簽來實現。
下面則是用兩組ul來實現，並且加入隱藏於用於記錄每個日期的具體年月日。
左右箭頭我們則是用兩個a標簽包含特殊樣式的span來實現。

js具體實現:
簡單的分析一下日歷的功能。
1.進入頁面首先在最中間一格加載出當天的日期，前后依次遞增遞減。
2.頂部顯示具體年月日顯示選中的日期。
3.左右箭頭翻頁每次跳轉一天。
4.點擊日期，改變選中日期的樣式，改變頂部年月日的文本顯示。
現在我們來具體分析一下實現方法。

1.文本賦值方法。(我們需要給下面的7個li根據日期，填寫上對應的文本，並且改變樣式)。
2.點擊日期方法。(點擊具體日期，我們根據點擊li節點的隱藏域需要改變頂部的日期，並且改變相應樣式)。
3.改變選中節點樣式方法。(根據頂部顯示的選中日期，與li中的隱藏於比較，日期相等的改變選中樣式)。
4.獲取前一天后一天的方法。
5.前后翻頁方法。(根據獲取前一天后一天的方法，對中間的li日期進行改變，通過中間的li日期依次遞增遞減獲取其他日期，依次賦值)。

下面則是:具體的js代碼。

var now = new Date();
/*
 * 初始化時間控件，傳入要渲染div的id，和時間的點擊事件
 */
function initBarTime(id,evn){
    var timeHtml = '<p  class="calendar-year" id="calyearp"></p><a href="javascript:nextTime();" class="mt20 calendar-btn calendar-btn-l"><span class="icon-triangle-w"></span></a><a href="javascript:lastTime();" class="mt20 calendar-btn calendar-btn-r"><span class="icon-triangle-e"></span></a><div class="calendar-day"><ul class="week week-hd "><li id="wli1">日</li><li id="wli2">一</li><li id="wli3">二</li><li id="wli4">三</li><li id="wli5">四</li><li id="wli6">五</li><li id="wli7">六</li></ul><ul class="week  week-day " id="dul"><li id="dli1"><span>1</span><input type="hidden" value=""/></li><li id="dli2"><span>2</span><input type="hidden" value=""/></li><li id="dli3"><span>3</span><input type="hidden" value=""/></li><li class="duty-cur" id="dli4"><span>4</span><input type="hidden" value=""/></li><li id="dli5"><span>5</span><input type="hidden" value=""/></li><li id="dli6"><span>6</span><input type="hidden" value=""/></li><li id="dli7"><span>7</span><input type="hidden" value=""/></li></ul>';
      $("#"+id).html(timeHtml);
      showTime();//初始化時間
      var distime = $("#dli4 input").val();
      changeTime(distime);//改變顯示時間
      changeTimeStyle();//改變選中節點樣式
      $("#dul li").click(function(){
          clickTime(this.id);
          evn();
      })
}

/*
 * 時間顯示
 */
function showTime(){
    var d = new Array(7);
    //var now = new Date();
    d[3] = now;
    d[2] = getLastDay(now);
    d[1] = getLastDay(d[2]);
    d[0] = getLastDay(d[1]);
    d[4] = getNextDay(now);
    d[5] = getNextDay(d[4]);
    d[6] = getNextDay(d[5]);
    setDataText(d);
    changeTimeStyle();
}
/*
 * 通過時間給文本賦值
 */
function setDataText(d){
    for(var i=0;i<7;i++){
        var year = d[i].getYear() + 1900;
        var sunday = d[i].getDay();
        var month = d[i].getMonth()+1;
        var day = d[i].getDate(); 
        $("#wli"+(i+1)).html(getweek(sunday));//給星期文本復制
        $("#dli"+(i+1)+ " span").html(day);//給日期文本復制
        if(month < 10)
            month = "0" + month;
        if(day < 10)
            day = "0" + day;        
        $("#dli"+(i+1)+ " input").val(year+"-"+month+"-"+day);//給隱藏日期賦值        
        //周六周日邊變紅
        if(getweek(sunday)=="日" || getweek(sunday)=="六"){
            $("#wli"+(i+1)).css("color","red");
        }
        else{
            $("#wli"+(i+1)).css("color","black");
        }
    }
}
/*
 * 獲取時間
 */
function clickTime(id){
    $("#dul li").removeClass("duty-cur");
    $("#"+id).addClass("duty-cur");
    var time = $("#"+id +" input").val();
    changeTime(time);
}
/*
 *改變選中顯示時間
 */
function changeTime(time){
    var t = time.split("-");
    if(t[1].length==1)
        t[1] = "0" + t[1];
    if(t[2].length==1)
        t[2] = "0" + t[2];
    $(".calendar-year").html(t[0]+"年"+ t[1] +"月" + t[2] + "日");
}
/*
 * 改變選中結點樣式
 */
function changeTimeStyle(){
    $("#dul li").removeClass("duty-cur");
    var time = $(".calendar-year").html();
    var y = time.substring(0,4);
    var m = time.substring(5,7);
    var d = time.substring(8,10);
    time = y + "-" + m + "-" + d;
    for(var i=0;i<7;i++){
        if($("#dli"+(i+1)+ " input").val() == time)
            $("#dli"+(i+1)).addClass("duty-cur");

    }
}
/*
 * 時間切換,向左滾動,后退（左箭頭點擊事件）
 */
function nextTime(){
    now = getLastDay(now);
    showTime();
}
/*
 * 時間切換,向右滾動,前進（右箭頭點擊事件）
 */
function lastTime(){
    now = getNextDay(now);
    showTime();
}
/*
 * 獲取后一天的時間
 */
function getNextDay(d){
    d = new Date(d);
    d = + d + 1000 * 60 * 60 * 24;
    d = new Date(d);
    return d;
}
/*
 * 獲取前一天的時間
 */
function getLastDay(d){
    d = new Date(d);
    d = + d - 1000 * 60 * 60 *24;
    d=new Date(d);
    return d;
}
/*
 * 獲取星期
 */
function getweek(day){
      var week = "";
      switch(day){
         case 0:week="日";break;
         case 1:week="一";break;
         case 2:week="二";break;
         case 3:week="三";break;
         case 4:week="四";break;
         case 5:week="五";break;
         case 6:week="六";break;
      }
      return week;
}

 

第二個日歷控件，整月的日歷。

(使用方法:initCalendar(id,evn)第一個參數是要渲染div的id，第二個參數是點擊日期發生的事件。)

html思路分析
首先我們看出來這個日歷分為四部分。
第一部分，最上方的年顯示。
第二部分，年顯示下面的一行月顯示。並且有左右翻頁箭頭。
第三部分，日歷主體顯示，顯示單月所有日期與每個日期對應的星期。
第四部分，當月選中日期的現實。

第一部分，我們用一個p標簽來實現。
第二部分，我們用一個ul來實現，ul兩端的箭頭用a標簽包含特殊樣式的span來實現。
第三部分，我們用一個ul來實現，前7個li固定的顯示周日到周六。后面的li顯示對應的日期。
第四部分，當月選中日期的現實，我們用一個div來實現。
選中日期我們分別用三個隱藏域記錄年月日。

js的具體實現:
首先我們來看一下日歷所需要的功能。
1.進入頁面首先加載當年當月的日歷，並且默認選中當天。
2.點擊左右翻頁箭頭一翻翻六個月的月份。
3.點擊月份，切換選中月份的日歷，並且選中上次選中的日期，若當月沒有那個日期則不顯示。
4.點擊選中具體的日期，最下方的顯示跟着一起變動，並且改變相應的選中狀態。

js重要方法:
1.初始化時間方法，初始化界面上所有顯示的顯示的年月日，以及隱藏域的值。
2.畫日歷方法，每次更改選擇月，則需要對應的重新畫日歷，並且設定選中月。
3.選擇日期方法，改變頁面上對應選擇日期的文本顯示。
4.選擇月方法，改變對應的選擇月份，與選擇年份，改變界面上的顯示值，改變隱藏域的值。
5.左右翻頁切換月份方法，一次點擊翻半年，改變月份文本，並且改變對應月份文本的年隱藏域，根據索引改變選擇月。

下面則是:具體的js代碼。

var evnClick ;
/*
 * 初始化時間控件，傳入要渲染div的id與日歷的點擊事件
 */
function initCalendar(id,evn){
    var calendarHtml = '<div class="calendar"><p class="calendar-year" id="pcalyear">2015年</p><a href="javascript:setLastMonth();" class="calendar-btn calendar-btn-l"><span class="icon-triangle-w"></span></a><a href="javascript:setNextMonth();" class="calendar-btn  calendar-btn-r"><span class="icon-triangle-e"></span></a><div class="calendar-months"><ul class="calendar-months" id="calmonthli"><li>1月</li><li>2月</li><li>3月</li><li class="months-cur">4月</li><li>5月</li><li>6月</li><li>7月</li><input type="hidden" value="" id="hidyear0" /><input type="hidden" value="" id="hidyear1" /><input type="hidden" value="" id="hidyear2" /><input type="hidden" value="" id="hidyear3" /><input type="hidden" value="" id="hidyear4" /><input type="hidden" value="" id="hidyear5" /><input type="hidden" value="" id="hidyear6" /></ul></div><div class="calendar-day" ><ul class="week week-b week-hd" ><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul><ul class="week week-b week-day week-day-b" id="caldayli"><li></li><li></li><li></li><li></li><li></li><li></li><li class="duty-full"><span>2</span><p>全天</p></li></ul></div></div><div  class="title-full" id="disDate"></div><input type="hidden" value="" id="selectYear"><input type="hidden" value="" id="selectMonth"><input type="hidden" value="" id="selectDay"><input type="hidden" value="3" id="selectMonIndex">';
      $("#"+id).html(calendarHtml);
    evnClick = evn;
    initTime();
      setCalendar();
      $("#calmonthli li").click(function(){
          setMonthStyle(this);
      })
}

/*
 * 初始化時間
 */
function initTime(){
    var nowtime = new Date();
    var selectYear = nowtime.getYear()+1900;//當前選擇年
    var selectMonth = nowtime.getMonth();//當前選擇月
    var selectDay = nowtime.getDate();//當前選擇日
    $("#selectYear").val(selectYear);
    $("#selectMonth").val(selectMonth);
    $("#selectDay").val(selectDay);
    $("#pcalyear").html(selectYear + "年");//改變顯示年
    setDisDate();//改變顯示日期
    var hidyear = selectYear;
    selectMonth += 1;
    //初始化月份列表，以及月份對應的年
    for(var i=0;i<7;i++){
        if(selectMonth-(3-i)>12){
            $("#calmonthli li").eq(i).html(selectMonth-(3-i+12)+"月");
            $("#hidyear"+i).val(hidyear+1);
        }
        else if(selectMonth-(3-i)<=0){
            $("#calmonthli li").eq(i).html(selectMonth-(3-i-12)+"月");
            $("#hidyear"+i).val(hidyear-1);
        }
        else{
            $("#calmonthli li").eq(i).html(selectMonth-(3-i)+"月");
            $("#hidyear"+i).val(hidyear);
        }
    }
}

/*
 * 選擇月的日歷
 */
function setCalendar(){
    clearCalendar();
    var selectYear = $("#selectYear").val();
    var selectMonth = $("#selectMonth").val();
    var selectDay = $("#selectDay").val();
    var dmonth = selectMonth*1 +1;//獲取當月最后一天所用月份（下個月的第0天）
    var dayNum = new Date(selectYear,dmonth,0);//獲取當月的最后一天
    dayNum = dayNum.getDate();
    var selectMonthDay = new Date(selectYear,selectMonth,1);//選擇月份的第一天
    var firstDayWeek = selectMonthDay.getDay();//獲取第一天的星期
    for(var i=firstDayWeek,j=1;i<=$(".week-day-b li").length&&j<=dayNum;i++,j++){
        $(".week-day-b li").eq(i).html("<span>"+j+"</span>");//填寫日期
        if(j == selectDay)
            $(".week-day-b li").eq(i).addClass("duty-cur");
        if(i==$(".week-day-b li").length-1&&j!=dayNum){//如果日歷格子不夠再畫一行
            for(var k=0;k<7;k++){
                $("#caldayli").append("<li></li>");
            }
        }
    }
    
    $("#caldayli li").click(function(){//綁定日歷li點擊事件
            setDayStyle(this);
            evnClick();
    })
}

/*
 * 清空日歷
 */
function clearCalendar(){
    $("#caldayli").html("");
    for(var k=0;k<7;k++){
        $("#caldayli").append("<li></li>");
    }
}
/*
 * 選擇日期
 */
function setDayStyle(dom){
    $(".week-day-b li").removeClass("duty-cur");
    $(dom).addClass("duty-cur");
    var v = dom.firstChild.innerHTML;//獲取點擊結點日期
    $("#selectDay").val(v);//改變當前選擇日期
    setDisDate();//改變顯示日期
}
/*
 * 選擇月份
 */
function setMonthStyle(dom){
    $(".calendar-months li").removeClass("months-cur");
    $(dom).addClass("months-cur");
    $("#selectMonIndex").val($(dom).index());//設置選中月下標
    var v = $(dom).html();//獲取選擇月份
    if(v.length==3)
        v = v.substring(0,2);
    else
        v = v.substring(0,1);
    v = v-1;
    $("#selectMonth").val(v);//改變選擇月
    var index = $(dom).index();//獲取月份li對應索引
    var selectYear = $("#hidyear" + index).val();//獲得選擇年
    $("#selectYear").val(selectYear);//改變選擇年
    $("#pcalyear").html(selectYear+ "年");//改變顯示年
    setDisDate();//變更顯示日期
    setCalendar();//變更日歷
}
/*
 * 設置下一頁月份，點一下翻半年
 */
function setNextMonth(){ 
    for(var i=0;i<7;i++){
        var m = $("#calmonthli li").eq(i).html();
        m = m.substring(0,m.length-1);
        if((m*1+6)>12){//設置對應月份的年份
            var hidyear = $("#hidyear"+i).val();
            $("#hidyear"+i).val(hidyear*1+1);
        }
        if((m*1+6) == 12)
            $("#calmonthli li").eq(i).html(12+"月");
        else
            $("#calmonthli li").eq(i).html((m*1+6)%12+"月");//設置當月li
    }
    //改變選擇月
    var selectMonth = $("#selectMonth").val();
    $("#selectMonth").val((selectMonth*1+6)%12);
    //改變選擇年
    var index = $("#selectMonIndex").val();//獲取選中月下標
    var syear = $("#hidyear"+index).val();//獲取選中月對應年
    $("#selectYear").val(syear);//設置選中年
    $("#pcalyear").html(syear+ "年");//改變顯示年
    //改變日歷
    setCalendar();
    setDisDate();//改變顯示日期
}
/*
 * 設置上一頁月份,點一下翻半年
 */
function setLastMonth(){
    for(var i=0;i<7;i++){
        var m = $("#calmonthli li").eq(i).html();
        m = m.substring(0,m.length-1);
        if((m*1-6)<0){//設置對應月份的年份
            var hidyear = $("#hidyear"+i).val();
            $("#hidyear"+i).val(hidyear*1-1);
        }
        if((m*1-6+12) == 12)
            $("#calmonthli li").eq(i).html(12+"月");
        else
            $("#calmonthli li").eq(i).html((m*1-6+12)%12+"月");//設置當月li
    }
    //改變選擇月
    var selectMonth = $("#selectMonth").val();
    $("#selectMonth").val((selectMonth*1-6+12)%12);
    //改變選擇年
    var index = $("#selectMonIndex").val();//獲取選中月下標
    var syear = $("#hidyear"+index).val();//獲取選中月對應年
    $("#selectYear").val(syear);//設置選中年
    $("#pcalyear").html(syear+ "年");//改變顯示年
    //改變日歷
    setCalendar();
    setDisDate();//改變顯示日期
}
/*
 * 設置顯示日期
 */
function setDisDate(){
    var selectYear = $("#selectYear").val();//獲取選中年月日
    var selectMonth = $("#selectMonth").val();
    var selectDay = $("#selectDay").val();
    var now = new Date(selectYear,selectMonth,selectDay);
    var selectWeek = now.getDay();//獲取選中天數日期
    selectWeek = getweek(selectWeek);
    //設置年月日
    $("#disDate").html(selectYear+"年 "+(selectMonth*1+1)+"月 "+selectDay+"日  星期" +selectWeek);
}

/*
 * 獲得星期
 */
function getweek(day){
      var week = "";
      switch(day){
         case 0:week="日";break;
         case 1:week="一";break;
         case 2:week="二";break;
         case 3:week="三";break;
         case 4:week="四";break;
         case 5:week="五";break;
         case 6:week="六";break;
      }
      return week;
}

 

最后:關於加載html。

之前想過利用jquery的load動態加載html頁渲染到某個div中，但因為其是異步的方法，加載順序會出問題，導致其他js無法正常運行，且增加了http的請求次數，

故將html代碼，寫成字符串，放入js中直接加載。

如果各位有更好的辦法，請賜教。