自己用js写的两个日历控件

Posted 2020-06-14

前一阵写了两个日历控件，做了简单的封装，发出来共朋友们参考。


第一个日历控件，条状的日历。

(使用方法:调用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中直接加载。

如果各位有更好的办法，请赐教。

 

源码链接:https://github.com/yfsmooth/calendar