Javascript Crusoe (on) __ Date object implementing the calendar plugin

 First, the use of native js calendar plugin achieve (a)

Achieve results:

 

Implementation code:

var time1 = document.querySelector('.time1'),
    time2 = document.querySelector('.time2'),
    number = document.querySelector('.number'),
    btns = document.querySelectorAll('.time3 span'),
    strong = document.querySelector('.time3 strong');

//即时时间
function time() {
    var d = new Date();
    time1.innerHTML = format(d.getHours()) + ':' + format(d.getMinutes()) + ':' + format(d.getSeconds());
}
time();
setInterval(time, 1000);
//格式化时间
function format(v) {
    return v < 10 ? '0' + v : v;
}

//即时日期
var d1 = new Date();
time2.innerHTML = d1.getFullYear() + '年' + (d1.getMonth() + 1) + '月' + d1.getDate() + '日，星期' + formatWeek(d1.getDay());
//格式化星期
function formatWeek(v) {
    return ['日', '一', '二', '三', '四', '五', '六'][v];
}

//获取到某个月最后一天的值
function getEndDay(year, month) {return new Date(year, month, 0).getDate();}
//获取到某个月第一天是周几
function getFirstWeek(year, month) {return new Date(year, month - 1, 1).getDay();}

//日历主体功能
function setDate(d) {
    var lastEndDay = getEndDay(d.getFullYear(), d.getMonth());	//获取到上个月的最后一天
    var curEndDay = getEndDay(d.getFullYear(), d.getMonth() + 1);//获取到当前月的最后一天（因为getMonth取到的值比实际小1，所以要加1）
    var week = getFirstWeek(d.getFullYear(), d.getMonth() + 1);//获取到当前月的第一天是周几

    var curDay = 1;//日期的起始值
    var str = '';//日期的结构
    var endNum = week - 1;//上个月所占格子的数量

    //如果当前月的第一天是周一，上个月就不会显示。为了显示，让endNum的值=7即可
    if(endNum == 0){endNum = 7;}
    //如果某个月的第一天是周日，week的值就是0，endNum就是个负数，就会出问题
    if(endNum < 0){endNum = 6;}

    for(var i = 0; i < 42; i++){
        if(i < endNum){
            //这个条件成立，说明这里放的是上个月的日期
            str = '<span class="color">' + (lastEndDay--) + '</span>' + str;
        }else if(i >= endNum + curEndDay){
	    //这个条件成立，说明这里放的是下个月的日期
            str += '<span class="color">' + (curDay++) + '</span>';
        }else{
            //这个条件成立，说明这里放的是这个月的日期
	    //当日日期高亮显示
	    var cl = new Date().getDate() == i - endNum + 1 ? 'active' : ''
	    if( d.getFullYear() != new Date().getFullYear() || d.getMonth() != new Date().getMonth() ){cl = '';}
	    //当月日期
            str += '<span class="' + cl + '">' + (i - endNum + 1) + '</span>';
        }
    }
	number.innerHTML = str;
	strong.innerHTML = d.getFullYear() + '年' + (d.getMonth() + 1) + '月';
}

var d = new Date();
setDate(d);

//点击上个月
btns[0].onclick = function(){
    d.setMonth(d.getMonth() - 1);
    setDate(d);
};

//点击下个月
btns[1].onclick = function(){
    d.setMonth(d.getMonth() + 1);
    setDate(d);
};	

 Second, realized with native js calendar plugin (II)

Achieve results:

Implementation code:

var selYear = document.getElementById("selYear");
var dateInfo = getDateInfo(new Date());

//根据一个date对象，得到日期的相关信息对象
function getDateInfo(date) {
    var obj = {
        year: date.getFullYear(),
        month: date.getMonth() + 1,
        day: date.getDate()
    }
    //计算当月最大日期
    obj.maxDay = new Date(obj.year, obj.month, 0).getDate();
    //计算该月1号的星期
    var newDate = new Date(obj.year, obj.month - 1, 1).getDay();
    obj.firstdayOfWeek = newDate === 0 ? 7 : newDate;
    return obj;
}

//根据数字，生成一个option，加入到指定的select元素中
function appendSelect(selDom, num) {
    var opt = document.createElement("option")
    opt.value = num;
    opt.innerHTML = num;
    selDom.appendChild(opt);
}

//根据指定的日期信息对象，初始化可选区域
function initHeader() {
    for (var i = dateInfo.year - 100; i <= dateInfo.year + 100; i++) {
        appendSelect(selYear, i);
    }
    var selMonth = document.getElementById("selMonth");
    for (var i = 1; i <= 12; i++) {
        appendSelect(selMonth, i);
    }
    //设置默认选中
    selYear.value = dateInfo.year;
    selMonth.value = dateInfo.month;
    //注册事件
    selYear.onchange = selMonth.onchange = function () {
        setContentArea();
    }
    document.getElementById("btnToToday").onclick = function () {
        selYear.value = dateInfo.year;
        selMonth.value = dateInfo.month;
        setContentArea();
    }
}

//根据指定的日期信息对象，设置内容区域
function setContentArea() {
    var dateInfo = getDateInfo(new Date(parseInt(selYear.value), parseInt(selMonth.value) - 1));
    var now = getDateInfo(new Date());
    var calendarContentDom = document.querySelector(".calendar-content");
    calendarContentDom.innerHTML = "";
    //补充前面的空白
    for (let index = 0; index < dateInfo.firstdayOfWeek - 1; index++) {
        var span = document.createElement("span");
        calendarContentDom.appendChild(span)
    }
    for (let i = 1; i <= dateInfo.maxDay; i++) {
        var span = document.createElement("span");
        span.innerHTML = i;
        //是否是今天
        if (now.year === dateInfo.year
            && now.month === dateInfo.month
            && i === now.day) {
            span.className = "active";
        }
        calendarContentDom.appendChild(span);
    }
}

initHeader();
setContentArea();

Above finishing from " crossing a live lesson education ", a recommended " crossing an education ."