日期控件

<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);


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值