日期控件

最新推荐文章于 2022-04-11 16:25:33 发布

miniala

最新推荐文章于 2022-04-11 16:25:33 发布

阅读量261

点赞数

分类专栏： javascript 文章标签： date function div

本文链接：https://blog.csdn.net/miniala/article/details/7173541

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<div id="date_box"></div>

var d = new Date();
var year = d.getFullYear(); //年份
var month = d.getMonth(); //第几个月
var date = d.getDate(); //几号
var startYear = 2000;
var endYear = 2020;
var years = 2020 - 2000;
var getDays = function(year, month){return (new Date(year, month, 0)).getDate();};
var getWeekDay = function(year, month, date){return (new Date(year, month, date)).getDay();}
var dateBox = document.getElementById('date_box');
var dateHead = document.createElement('div');
dateHead.setAttribute('id', 'date_head')
dateBox.appendChild(dateHead);
var dateBody = document.createElement('div');
dateBody.setAttribute('id', 'date_body')
dateBox.appendChild(dateBody);
//显示年份
var yearSelector = document.createElement('select');

for(var i=0; i<years; i++){
    var curYear = startYear + i;
    var newOption = document.createElement('option');
    newOption.setAttribute('value', curYear);
    newOption.innerHTML = curYear;
    yearSelector.appendChild(newOption)
}

dateHead.appendChild(yearSelector); //添加年份
yearSelector.onchange = function(){
    setWeekTable(this.value, 0);
    var optionArr = monthEle.getElementsByTagName('option');
    optionArr[0].selected = true;
}
//显示月份
var monthEle = document.createElement('select');
for(var i=0; i<12; i++){
    var newOption = document.createElement('option');
    newOption.setAttribute('value', i);
    newOption.innerHTML = i+1;
    monthEle.appendChild(newOption)
}
dateHead.appendChild(monthEle); //添加月份
monthEle.onchange = function(){
    setWeekTable(year, this.value)
}
//显示日期
function setWeekTable(year, month){
    var days = getDays(year, month);
    var weekDay = getWeekDay(year, month, 1);
    var count = 0;
    var daysTable = '<table><tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr><tr>'
    for(var j=0; j<weekDay; j++){
        daysTable += '<td></td>'
    }
    for(var i=0; i<days; i++){
        if((count + weekDay + i)%7 == 0){
            daysTable += '</tr></tr>'
        }
        daysTable += '<td>'+(i+1)+'</td>'
    }
    daysTable += '</tr></table>'
    dateBody.innerHTML = daysTable;
}

setWeekTable(year, month);