JavaScript用select实现日期控件

下面是使用JavaScript的select标签实现日期控件的攻略：

1. 准备工作

首先，我们需要在HTML中定义一个日期选择器的容器，以及年、月、日三个select标签来分别展示年、月、日的选择菜单。我们先来看一下HTML代码：

<div id="datePicker">
  <select id="yearSelect"></select>年
  <select id="monthSelect"></select>月
  <select id="daySelect"></select>日
</div>

其中，datePicker是日期选择器的容器id，yearSelect、monthSelect、daySelect是三个选择菜单的id。

接下来，我们需要在JavaScript中动态生成年、月、日的选项，然后将它们添加到对应的select标签中。这时，我们可以使用循环语句生成选项，代码如下：

// 获取年份选择菜单
var yearSelect = document.getElementById("yearSelect");

// 获取月份选择菜单
var monthSelect = document.getElementById("monthSelect");

// 获取日期选择菜单
var daySelect = document.getElementById("daySelect");

// 获取当前时间
var date = new Date();
var year = date.getFullYear(); // 年份
var month = date.getMonth() + 1; // 月份
var day = date.getDate(); // 日期

// 添加年份选项
for (var i = year - 10; i <= year + 10; i++) {
  var option = document.createElement("option");
  option.text = i;
  yearSelect.add(option);
}

// 添加月份选项
for (var i = 1; i <= 12; i++) {
  var option = document.createElement("option");
  option.text = i;
  monthSelect.add(option);
}

// 添加日期选项
function addDayOption(year, month) {
  // 先清空日选择菜单
  daySelect.options.length = 0;

  // 获取当月的天数
  var dayCount = new Date(year, month, 0).getDate();

  // 添加日期选项
  for (var i = 1; i <= dayCount; i++) {
    var option = document.createElement("option");
    option.text = i;
    daySelect.add(option);
  }
}

// 初始化日期选择菜单
addDayOption(year, month);

上述代码中，我们首先获取了年、月、日三个选择菜单的dom对象，然后使用for循环逐个生成年份和月份的选项，最后使用addDayOption函数初始化日期选择菜单，其中该函数用于根据选择的年份和月份动态生成日期的选项。

2. 添加事件监听

为了让年、月、日三个选择菜单之间可以相互联动，我们需要给它们添加事件监听。这样，当选择了年份或月份时，日期选择菜单的选项也会随之改变。代码如下：

// 给年份选择菜单添加事件监听
yearSelect.addEventListener("change", function () {
  var year = yearSelect.value; // 选中的年份
  var month = monthSelect.value; // 选中的月份
  addDayOption(year, month);
});

// 给月份选择菜单添加事件监听
monthSelect.addEventListener("change", function () {
  var year = yearSelect.value; // 选中的年份
  var month = monthSelect.value; // 选中的月份
  addDayOption(year, month);
});

上述代码中，我们使用addEventListener方法给年、月选择菜单添加change事件监听，当选择改变时，会执行该函数，同时将选择的年份和月份传入addDayOption函数，从而动态更新日期选择菜单的选项。

3. 示例说明

下面我们来看两个使用了上述方法的示例。

示例1：在表单中添加日期控件

<form>
  <div>
    <label for="birthday">生日：</label>
    <div class="datePicker">
      <select id="year"></select>年
      <select id="month"></select>月
      <select id="day"></select>日
    </div>
  </div>
  <button type="submit">提交</button>
</form>

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

// 添加年份选项
for (var i = 1900; i <= 2022; i++) {
  var option = document.createElement("option");
  option.text = i;
  yearSelect.add(option);
}

// 添加月份选项
for (var i = 1; i <= 12; i++) {
  var option = document.createElement("option");
  option.text = i;
  monthSelect.add(option);
}

// 添加日期选项
function addDayOption(year, month) {
  daySelect.options.length = 0;
  var dayCount = new Date(year, month, 0).getDate();
  for (var i = 1; i <= dayCount; i++) {
    var option = document.createElement("option");
    option.text = i;
    daySelect.add(option);
  }
}

addDayOption(yearSelect.value, monthSelect.value);

// 添加事件监听
yearSelect.addEventListener("change", function () {
  var year = yearSelect.value;
  var month = monthSelect.value;
  addDayOption(year, month);
});

monthSelect.addEventListener("change", function () {
  var year = yearSelect.value;
  var month = monthSelect.value;
  addDayOption(year, month);
});

在上述示例中，我们使用了HTML的表单标签，然后在表单中添加了日期选择器，当用户选择完成后，可以提交表单。

示例2：实现简洁的日期选择器

<div class="datePicker">
  <select id="year"></select>
  <select id="month"></select>
  <select id="day"></select>
</div>

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

// 添加年份选项
for (var i = 2022; i >= 1900; i--) {
  var option = document.createElement("option");
  option.text = i;
  yearSelect.add(option);
}

// 添加月份选项
for (var i = 1; i <= 12; i++) {
  var option = document.createElement("option");
  option.text = i;
  monthSelect.add(option);
}

// 添加日期选项
function addDayOption(year, month) {
  daySelect.options.length = 0;
  var dayCount = new Date(year, month, 0).getDate();
  for (var i = 1; i <= dayCount; i++) {
    var option = document.createElement("option");
    option.text = i;
    daySelect.add(option);
  }
}

addDayOption(yearSelect.value, monthSelect.value);

// 添加事件监听
yearSelect.addEventListener("change", function () {
  var year = yearSelect.value;
  var month = monthSelect.value;
  addDayOption(year, month);
});

monthSelect.addEventListener("change", function () {
  var year = yearSelect.value;
  var month = monthSelect.value;
  addDayOption(year, month);
});

在上述示例中，我们只使用了三个选择菜单，没有容器包裹，从而展示出简洁美观的效果。

以上就是使用JavaScript的select标签实现日期控件的攻略。