jsp实现日期控件代码

在 JSP 中实现日期控件，可以使用第三方框架或者自己编写 JavaScript 实现。以下是一个简单的示例代码：

1. 借助第三方框架

使用第三方框架可以简化日期控件的实现过程，常见的框架有 jQuery UI、Bootstrap Datepicker 等。以 jQuery UI 为例：

首先，在 jsp 页面中引入 jQuery 库和 jQuery UI 库：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

然后，在需要使用日期控件的 input 标签中添加以下代码：

<input type="text" id="datepicker">

最后，在 JavaScript 中实现日期控件：

$( function() {
  $( "#datepicker" ).datepicker();
} );

2. 自己编写 JavaScript 实现

如果不想使用第三方框架，也可以自己编写 JavaScript 实现。以下是一个简单的示例代码：

在 jsp 页面中添加以下代码：

<input type="text" id="datepicker">

在 JavaScript 中实现日期控件：

var datepicker = document.getElementById("datepicker");

datepicker.addEventListener("focus", function() {
  var datePickerDiv = document.createElement("div");
  datePickerDiv.setAttribute("id", "datePickerDiv");

  var currentDate = new Date();
  var currentYear = currentDate.getFullYear();
  var currentMonth = currentDate.getMonth() + 1;
  var currentDay = currentDate.getDate();

  var yearSelect = "<select id='yearSelect'>";
  for (var i = currentYear - 10; i <= currentYear + 10; i++) {
    yearSelect += "<option value='" + i + "'>" + i + "</option>";
  }
  yearSelect += "</select>";

  var monthSelect = "<select id='monthSelect'>";
  for (var i = 1; i <= 12; i++) {
    var monthText = i < 10 ? "0" + i : i;
    monthSelect += "<option value='" + i + "'>" + monthText + "</option>";
  }
  monthSelect += "</select>";

  var daySelect = "<select id='daySelect'>";
  for (var i = 1; i <= 31; i++) {
    var dayText = i < 10 ? "0" + i : i;
    daySelect += "<option value='" + i + "'>" + dayText + "</option>";
  }
  daySelect += "</select>";

  datePickerDiv.innerHTML = yearSelect + monthSelect + daySelect;
  datePickerDiv.style.position = "absolute";
  datePickerDiv.style.left = datepicker.offsetLeft + "px";
  datePickerDiv.style.top = datepicker.offsetTop + datepicker.offsetHeight + "px";
  datePickerDiv.style.backgroundColor = "#fff";
  datePickerDiv.style.border = "1px solid #ccc";
  datePickerDiv.style.padding = "5px";

  document.body.appendChild(datePickerDiv);

  var yearSelect = document.getElementById("yearSelect");
  var monthSelect = document.getElementById("monthSelect");
  var daySelect = document.getElementById("daySelect");

  yearSelect.value = currentYear;
  monthSelect.value = currentMonth;
  daySelect.value = currentDay;

  yearSelect.addEventListener("change", function() {
    setDays();
  });

  monthSelect.addEventListener("change", function() {
    setDays();
  });

  function setDays() {
    var year = yearSelect.value;
    var month = monthSelect.value;
    var day = daySelect.value;

    var daysInMonth = new Date(year, month, 0).getDate();

    daySelect.innerHTML = "";
    for (var i = 1; i <= daysInMonth; i++) {
      var dayText = i < 10 ? "0" + i : i;
      daySelect.innerHTML += "<option value='" + i + "'>" + dayText + "</option>";
    }

    if (day > daysInMonth) {
      daySelect.value = daysInMonth;
    } else {
      daySelect.value = day;
    }
  }

  function hideDatePicker() {
    datePickerDiv.parentNode.removeChild(datePickerDiv);
  }

  yearSelect.focus();
  yearSelect.select();

  yearSelect.addEventListener("blur", function() {
    hideDatePicker();
  });

  monthSelect.addEventListener("blur", function() {
    hideDatePicker();
  });

  daySelect.addEventListener("blur", function() {
    hideDatePicker();
  });
});

以上代码实现了一个简单的日期控件，包含年、月、日三个下拉框，用户选择日期后会自动填充到 input 标签中。