使用JavaScript怎么编写一个日历组件

drawShowDateBar函数为日期控制栏的年份、月份、和天的点击按钮设置了点击事件处理函数。还有选择下拉框变化的处理函数。

在日期控制栏初始化时，或者改变showDateBar的Date时，都会调用changeShowDateBar 函数。这个函数主要根据传入的日期改变日期控制栏“日”下拉栏的天数，因为每个月的天数不尽相同，所以要根据传入的日期来改变。会计算出传入的日期对应的月份有多少天，使用getDaysOfMonth函数计算。

//计算一个月的天数
  getDaysOfMonth: function(primalDate) {
    var date = new Date(primalDate); //要新建一个对象，因为会改变date
    var month = date.getMonth();
    var time = date.getTime();    //计算思路主要是month+1,相减除一天的毫秒数
    var newTime = date.setMonth(month + 1);
    return Math.ceil((newTime - time) / (24 * 60 * 60 * 1000));
  },

changeShowDateBar : function(date){
    var yearInput = this.showDateBar.firstChild;
    var monthInput = yearInput.nextSibling;
    var dayInput = monthInput.nextSibling;
    yearInput.firstChild.innerText = date.getFullYear()+'年';
    var monthsOptions = monthInput.firstChild.nextSibling;
    monthsOptions.selectedIndex = date.getMonth();
    var daysOptions = dayInput.firstChild.nextSibling;
    var days = this.getDaysOfMonth(date);
    var dayStr = '';
    for(var i=1;i<=days;i++){
      dayStr+=''+i+'日';
    }
    daysOptions.innerHTML = dayStr;
  // console.log(date.toLocaleDateString()+'changeShowDateBar');
    daysOptions.selectedIndex = date.getDate()-1;
    this.drawPicker(date);
  },

在日期控制栏的Date变化后，日历格子的日期也应该要改变，显示的日期要和日期控制栏的保持一致。所以在changeShowDateBar函数结尾处调用drawPicker函数，重新绘制日历格子。

绘制日历格子的思路

drawPicker函数要根据传入的日期绘制日历格子。

• 首先计算传入的日期月份的天数

• 计算这个月1号是周几 。利用Date对象的date.setDate(1) //将天设置为1号 。date.getDay() //得到这天是周几

• 如果1号不是周日，则补全周日到1号的天数。可以利用oldDate.setDate(-1) //设置日期为原来日期的上个月的最后一天。注意setDate是会改变当前日期的，并不是返回新的日期。

• 从1号到这个月最后一天循环。

• 补全最后一天到周六的天数

drawPicker函数：

drawPicker: function(primalDate) {
    var date = new Date(primalDate); //要新建一个对象，因为会改变date
    var nowMonth = date.getMonth()+1;
    var nowDate = date.getDate();
    var spanContainer = [];
    var dateBox = this.dateBox;
    dateBox.innerHTML = '';
    var time = date.getTime();
    var days = this.getDaysOfMonth(date); //计算出这个月的天数
    date.setDate(1);            //将date的日期设置为1号
    var firstDay = date.getDay();     //知道这个月1号是星期几
    for (var i = 0; i < firstDay; i++) {  //如果1号不是周日(一周的开头),则在1号之前要补全
      var tempDate = new Date(date);
      tempDate.setDate(i - firstDay + 1);
      var span = document.createElement("span");
      span.className = "unshow";
      spanContainer.push({span : span, date : tempDate});
    }
    for (var i = 1; i <= days; i++) {    //1号到这个月最后1天
      var span = document.createElement("span");
      span.className = 'show';
      spanContainer.push({span : span, date : new Date(date)});
      date.setDate(i + 1);
    }
    for (var i = date.getDay(); i <= 6; i++) { //在这个月最后一天后面补全
      var span = document.createElement("span");
      span.className = "unshow";
      spanContainer.push({span : span, date : new Date(date)});
      date.setDate(date.getDate()+1);
    }
    for(var i=0;i
//日期框点击时显示日历
  onDateInputClick: function(event) { 
    var target = event.target;
    var value = target.value;
    var datePicker = this.datePicker;
    if(datePicker.style.display==='none'){  //这里必须要在js文件里将datePicker.style.display设置为none，如果是在css文件里设置为none,得到的display为""
      datePicker.style.display = 'block';
    }else{
      datePicker.style.display = 'none';
      return; 
    }
    if (!value) this.drawShowDateBar(this.showDateBar); //绘制日历的显示栏 
  },
  changeDate : function(year, month, date){
    this.dateInput.value = year+"-"+(month<10?("0"+month):month)+"-"+(date<10?("0"+date):date);
  },
实现效果
有点丑......
实现中遇到的问题
日历格子的绘制问题 。要补全1号前面到周日的天数，还要补全当月最后1号到周六的天数。日历格子的绘制可以分为3部分，当月前面、当月和当月后面的。要计算出1号是周几，然后将这周周日到1号的天数绘制。
当月的日历从1号到最后1号循环绘制。补全最后1号到周六的天数(date.getDay()<=6)
日历格子和日期控制栏显示的同步。在绘制时为每个日历格子单元保存其代表的Date。点击格子单元时，调用changeShowDateBar函数，将单元存的Date传入，改变日期控制栏显示的日期，然后重绘日历格子。
每个月天数不同，出现的“日”选择框天数不同的问题。在changeShowDateBar函数里会根据传入的Date，计算当月有多少天，然后动态生成“日”选择框应有的天数。
跨月，跨年的处理。在日期控制栏中，有月份和日的上下按钮，在处理跨月和跨年时，判断这月(日)是否为最后一月(日)，若为，则日期控制栏的Date的年(月)加1，将显示的月(日)设为第一月(日)，调用changeShowDateBar函数。同理判断是否为第一月(日)。
用到的Date API
date.getFullYear() //得到date的年份
date.getMonth() //得到月份 0-11
date.getDate() //得到日期 1-31的数字
date.getDay() // 得到这天是周几 0-6
date.getTime()// 得到date的时间戳 ms表示
date.setFullYear(2017); // 设置年份
date.setMonth(x) // 如果设置为0-11，则date为x年的1-12月，如果比11大，则会往前面推，会跳到x+([(n+1)/12])年的第（n+1）%12个月
如果为负数，例如-1则会调到上一年的最后一月去。
date.setDate(x) // 和setMonth是同理的，它会自动根据当月的天数，判断是否发生月份的变动。-1代表date跳到上月的最后一天
date.setTime()// 根据时间戳设置date
关于使用JavaScript怎么编写一个日历组件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
            
            
                        

            网页标题：使用JavaScript怎么编写一个日历组件            

            标题网址：http://cdxtjz.cn/article/jjegjj.html
        
    
    

        
其他资讯
        

            

                    go语言的学习,go语言好学不
                

                    vb.netdde通讯,vb网络通信
                

                    C语言函数传值使用s,C语言函数传值
                

                    phppdo数据库教程,phppdo连接数据库
                

                    java代码实现自增主键,sql自增主键代码