javascript实现日历控件(年月日关闭按钮)

实现一个完整的日历控件包括以下几个步骤：

创建HTML结构

在HTML文件中创建一个日历控件的容器，例如：

<div id="calendar">
  <div class="header">
    <span class="prev">&lt;</span>
    <span class="currentDate"></span>
    <span class="next">&gt;</span>
    <span class="close">X</span>
  </div>
  <div class="content"></div>
</div>

其中，容器id为calendar，包含一个头部(header)和内容区(content)。头部包含当前日期、上一个月、下一个月和关闭按钮。

添加CSS样式

为日历控件添加样式，例如：

#calendar {
  position: absolute;
  width: 240px;
  height: 220px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 3px rgba(0,0,0,.3);
  font-size: 12px;
  color: #333;
}

#calendar .header {
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ccc;
}

#calendar .header span {
  display: inline-block;
  width: 30px;
  cursor: pointer;
}

#calendar .content {
  padding: 10px;
  text-align: center;
}

#calendar table {
  width: 100%;
  border-collapse: collapse;
}

#calendar th,
#calendar td {
  padding: 5px;
}

#calendar td:hover {
  background-color: #f5f5f5;
  cursor: pointer;
}

#calendar td.selected {
  background-color: #337ab7;
  color: #fff;
}

加载JavaScript文件

在HTML文件中加载JavaScript文件，例如：

<script src="calendar.js"></script>

编写JavaScript代码

在JavaScript文件中编写日历控件的相关代码，例如：

var Calendar = function (id) {
  this.container = document.getElementById(id);
  this.currentDate = new Date();
  this.buildCalendar();
};

Calendar.prototype.buildCalendar = function () {
  // 清空之前的内容
  this.container.querySelector('.content').innerHTML = '';

  // 创建头部
  var header = this.createHeader();
  this.container.querySelector('.header').appendChild(header);

  // 创建表格
  var table = this.createTable();
  this.container.querySelector('.content').appendChild(table);

  // 绑定事件
  var self = this;
  this.container.querySelector('.prev').addEventListener('click', function () { self.gotoPrevMonth(); });
  this.container.querySelector('.next').addEventListener('click', function () { self.gotoNextMonth(); });
  this.container.querySelector('.close').addEventListener('click', function () { self.closeCalendar(); });
  var tds = this.container.querySelectorAll('td');
  for (var i = 0; i < tds.length; i++) {
    tds[i].addEventListener('click', function () { self.selectDate(this); });
  }
};

Calendar.prototype.createHeader = function () {
  var header = document.createElement('div');
  var prev = document.createElement('span');
  var next = document.createElement('span');
  var close = document.createElement('span');
  var currentDate = document.createElement('span');
  prev.innerHTML = '&lt;';
  next.innerHTML = '&gt;';
  close.innerHTML = 'X';
  currentDate.innerHTML = this.currentDate.getFullYear() + '年' + (this.currentDate.getMonth() + 1) + '月';
  currentDate.className = 'currentDate';
  prev.className = 'prev';
  next.className = 'next';
  close.className = 'close';
  header.appendChild(prev);
  header.appendChild(currentDate);
  header.appendChild(next);
  header.appendChild(close);
  return header;
};

Calendar.prototype.createTable = function () {
  var table = document.createElement('table');
  var thead = document.createElement('thead');
  var tbody = document.createElement('tbody');

  // 创建星期几的表头
  var weekDays = ['日', '一', '二', '三', '四', '五', '六'];
  var tr = document.createElement('tr');
  for (var i = 0; i < weekDays.length; i++) {
    var th = document.createElement('th');
    th.innerHTML = weekDays[i];
    tr.appendChild(th);
  }
  thead.appendChild(tr);

  // 创建日期的表格
  var firstDay = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), 1);
  var lastDay = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 0);
  var daysInMonth = lastDay.getDate();
  var dayOfWeek = firstDay.getDay();
  var date = 1;
  var selectedDate = null;
  for (var i = 0; i < 6; i++) {
    var tr = document.createElement('tr');
    for (var j = 0; j < 7; j++) {
      var td = document.createElement('td');
      if (i === 0 && j < dayOfWeek) {
        // 上个月的日期
        var prevMonthLastDay = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), 0);
        td.innerHTML = prevMonthLastDay.getDate() - (dayOfWeek - j - 1);
        td.className = 'inactive';
      } else if (date > daysInMonth) {
        // 下个月的日期
        td.innerHTML = date - daysInMonth;
        td.className = 'inactive';
        date++;
      } else {
        td.innerHTML = date;
        date++;
      }

      if (td.innerHTML === selectedDate) {
        td.className = 'selected';
      }
      tr.appendChild(td);
    }
    tbody.appendChild(tr);
  }
  table.appendChild(thead);
  table.appendChild(tbody);
  return table;
};

Calendar.prototype.gotoPrevMonth = function () {
  this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() - 1, 1);
  this.buildCalendar();
};

Calendar.prototype.gotoNextMonth = function () {
  this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 1);
  this.buildCalendar();
};

Calendar.prototype.selectDate = function (td) {
  var currentDate = this.currentDate.getFullYear() + '-' + (this.currentDate.getMonth() + 1) + '-' + td.innerHTML;
  console.log(currentDate);
};

Calendar.prototype.closeCalendar = function () {
  this.container.style.display = 'none';
};

以上是一个基本的日历控件的JavaScript代码，在这个控件中提供了选择日期、关闭控件、上一个月、下一个月等功能。可以在需要的页面中实例化该控件，并调用相应方法进行日期的选择。

以下是一个示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript实现日历控件示例</title>
  <style>
    #calendar {
      position: absolute;
      width: 240px;
      height: 220px;
      background-color: #fff;
      border: 1px solid #ccc;
      box-shadow: 2px 2px 3px rgba(0,0,0,.3);
      font-size: 12px;
      color: #333;
    }

    #calendar .header {
      height: 30px;
      line-height: 30px;
      text-align: center;
      background-color: #f5f5f5;
      border-bottom: 1px solid #ccc;
    }

    #calendar .header span {
      display: inline-block;
      width: 30px;
      cursor: pointer;
    }

    #calendar .content {
      padding: 10px;
      text-align: center;
    }

    #calendar table {
      width: 100%;
      border-collapse: collapse;
    }

    #calendar th,
    #calendar td {
      padding: 5px;
    }

    #calendar td:hover {
      background-color: #f5f5f5;
      cursor: pointer;
    }

    #calendar td.selected {
      background-color: #337ab7;
      color: #fff;
    }
  </style>
</head>
<body>
  <input type="text" id="date" />
  <div id="calendar">
    <div class="header">
      <span class="prev">&lt;</span>
      <span class="currentDate"></span>
      <span class="next">&gt;</span>
      <span class="close">X</span>
    </div>
    <div class="content"></div>
  </div>
  <script src="calendar.js"></script>
  <script>
    var dateInput = document.getElementById('date');
    dateInput.addEventListener('click', function () {
      var calendar = new Calendar('calendar');
      calendar.container.style.display = 'block';
    });
  </script>
</body>
</html>

以上示例中，为页面中的input元素绑定了点击事件，当点击该元素时，实例化了一个日历控件，并显示在页面上。通过这个控件选择的日期可以在控制台中查看。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript实现日历控件(年月日关闭按钮) - Python技术站