JavaScript日历制作并实现拖动选择日期

效果展示

代码

html

    
        
        
    
    
        

        清空
        

        
        
        确认
    

css

body{
    display: flex;
    flex-direction: column;
}
#timetable{
    justify-content: center;
    align-items: center;
    align-content: center;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    margin: 0 auto;
    margin-top: 10rem;
}
#timetable .tr{
    display: flex;
    flex: row;
}
#timetable .tr .cell{
    border: #000000 1px solid;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    width: 2rem;
}
#timetable .tr .title{
    border: #000000 1px solid;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    width: 2rem;
    background-color: bisque;
}
#clear{
    justify-content: center;
    align-items: center;
    align-content: center;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    margin: 2rem auto;
}
#showSelected{
    text-align: center;
    margin: 0 auto;
    width: 80%;
}
.selected{
    background-color: grey !important;
}
.today{
    background-color: cornflowerblue;
}

JavaScript

//定义行数、列数和天数
var hang = 6,lie = 7,days = 30,year = new Date().getFullYear() ,month = new Date().getMonth() + 1,day = new Date().getDate();
//鼠标按下和抬起的坐标
var startX1 = 0,startY1 = 0,endX1 = 0,endY1 = 0,flag = false;
var weekday = ["日", "一", "二", "三", "四", "五", "六"];

//判断润年
function isLeapYear(year){
    if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) return true;//2月份29日
    return false;
}
//判断日期的星期
function monthStartWeek(date){
    console.log(date);
    let ind = new Date(date).getDay();
    return ind;
}
//获取天数
function getDays(){
    if(month == 2){
        days = 28;
        if(isLeapYear(year)) days = 29;
    }else if([1,3,5,7,8,10,12].indexOf(parseInt(month)) != -1){
        days = 31;
    }else{
        days = 30;
    }
}
getDays();

//确定按钮
let confirm = document.getElementById('confirm');
confirm.onclick =function(){
    year = document.getElementById('yearInput').value;
    month = document.getElementById('monthInput').value;
    getDays();
    // let ind = monthStartWeek(year + '-' + month + '-1');
    let ind = new Date(year + '-' + month + '-01').getDay();
    drawTable(ind);
}

//绘制表格
function drawTable(ind){
    console.log('111111111',ind);
    let timetable = document.getElementById('timetable');
    timetable.innerHTML = "";
    //-------------表头------------
    let tr = document.createElement('div');
    tr.classList.add('tr');
    for(let i = 0; i < lie; i++){
        let node = document.createElement('div');
        let text = weekday[i];
        node.innerText = text;
        node.classList.add('title');
        tr.appendChild(node); 
    }
    timetable.appendChild(tr);
    //-----------------
    console.log('year',year,'month',month,'days',days);
    for(let i = 0; i < hang; i++){
        let tr = document.createElement('div');
        tr.classList.add('tr');
        for(let j = 0; j < lie; j++){
            let text = i * lie + j - ind + 1;
            let node = document.createElement('div');
            if(text == day) node.classList.add('today');
            if(text > 0) node.innerText = text;
            node.classList.add('cell');
            tr.appendChild(node); 
            if(text >= days){
                timetable.appendChild(tr);
                return;
            } 
        }
        timetable.appendChild(tr); 
    }
}

drawTable(new Date(year + '-' + month + '-01').getDay());

//监听鼠标按下
function mousedown(e) {
    // console.log('down');
    startX1 = e.x;
    startY1 = e.y;
    flag = true;
}
//监听鼠标抬起
function mouseup(e) {
    select(e.x,e.y);
    flag = false;
}
//监听鼠标移动
function mouseover(e){
    //判断鼠标是不是为按压状态
    if(!flag) return;
    select(e.x,e.y);
}
//选择区间
function select(x,y){
    endX1 = x;
    endY1 = y;
    let timetable = document.getElementById('timetable');
    //获取小格子的宽高、表格的宽高
    let cell = document.getElementsByClassName('cell')[0];
    let cellH = cell.offsetHeight,
        cellW = cell.offsetWidth,
        tableL = timetable.getBoundingClientRect().left,
        tableT = timetable.getBoundingClientRect().top,
        tableR = timetable.getBoundingClientRect().right,
        tableB = timetable.getBoundingClientRect().bottom;
    tableR = tableL + lie * cellW;
    tableB = tableT + hang * cellH;
    //小的为开始坐标、大的为结束坐标
    let startX = Math.min(startX1,endX1),
        startY = Math.min(startY1,endY1),
        endX = Math.max(startX1,endX1),
        endY = Math.max(startY1,endY1);
    //转换为数组下标
    let indsx = Math.max(Math.floor((startX - tableL)/cellW),0);
    let indsy = Math.max(Math.floor((startY - tableT)/cellH),0);
    let index = Math.min(Math.floor((endX - tableL)/cellW),lie - 1);
    let indey = Math.min(Math.floor((endY - tableT)/cellH),hang);
    let tr = timetable.children;
    
    //将选择的内容展示出来
    let showSelected = document.getElementById('showSelected');
    let showtext = [];
    
    //循环找出当前选中的区域并做上标记，并将未选中的区域标记去除
    for(let i = 0; i < tr.length; i++){
        let td = tr[i].children;
        for(let j = 0; j < td.length; j++){
            if(i >= indsy && i <= indey && j >=indsx && j <= index){
                if(td[j].innerText.length == 0) continue;
                if(i > 0) td[j].classList.add('selected');
                if(i > 0) showtext.push(td[j].innerText);
            }else{
                td[j].classList.remove('selected')
            }
        }
    }
    showSelected.innerText = showtext.join('、');
}

//清空选择区域
var clear = document.getElementById("clear"); 
clear.onclick =function(){
    console.log('清空');
    let timetable = document.getElementById('timetable');
    let tr = timetable.children;
    for(let i = 0; i < tr.length; i++){
        let td = tr[i].children;
        for(let j = 0; j < td.length; j++){
            td[j].classList.remove('selected');
        }
    }
}

…………
Gitee地址：https://gitee.com/zheng_yongtao/html-css-js-Achieve-cool-results.git