html日历选择日期的代码

宋家德 2周前 8浏览 0评论

在网站开发中，日期选择器是一个非常常见的功能，可以让用户更方便地选择日期。HTML中提供了一些标签和属性，可以通过与JavaScript结合实现日历功能。

下面是一个使用HTML和JavaScript实现的日历选择器代码:

<html>
<head>
<title>日历选择器</title>
<script>
// 获取当前日期
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1; // 月份从0开始，需要加1

// 初始化日历表格
function initCalendar(year, month) {
  var days = getDays(year, month); // 获取当前月份的天数
  var firstDay = getFirstDay(year, month); // 获取当前月份第一天是星期几
  var table = document.getElementById('calendar');
  var date = 1;

  for (var i = 1; i <= 6; i++) {
    var row = table.insertRow(i);

    for (var j = 0; j < 7; j++) {
      var cell = row.insertCell(j);

      if ((i == 1 && j < firstDay) || date > days) {
        cell.innerHTML = ' '
      } else {
        cell.innerHTML = date;
        cell.addEventListener('click', function() {
          // 点击日期时触发
          console.log(year + '-' + month + '-' + this.innerHTML);
        });
        date++;
      }
    }
  }
}

// 获取当前月份的天数
function getDays(year, month) {
  var days = 31;

  if (month == 4 || month == 6 || month == 9 || month == 11) {
    days = 30;
  } else if (month == 2) {
    if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
      days = 29;
    } else {
      days = 28;
    }
  }

  return days;
}

// 获取当前月份第一天是星期几
function getFirstDay(year, month) {
  var date = new Date(year, month - 1, 1);
  return date.getDay();
}

// 初始化日历
window.onload = function() {
  initCalendar(year, month);
}
</script>
</head>
<body>
<table id="calendar">
  <thead>
    <tr>
      <th>周日</th>
      <th>周一</th>
      <th>周二</th>
      <th>周三</th>
      <th>周四</th>
      <th>周五</th>
      <th>周六</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>
</body>
</html>

这段代码通过调用JavaScript函数动态生成了日历表格，当用户点击某一日期时，会在控制台输出当前日期。

日历选择器是一个非常实用的功能，可以帮助用户更方便地选择日期。在实际开发中，还需要考虑一些实际的问题，比如用户选择日期后如何提交表单数据等等。

上一篇 html方形表盘时钟代码实现

下一篇 python3 远程路由

网站导航

网站导航

最近发表

文章归档

html日历选择日期的代码