新手求助：如何创建仅含年份选项的筛选表单（下拉/datepicker）

嘿，别发愁啦！作为编程新手，想做一个只显示年份的筛选表单真的不难，我给你准备了两种超容易上手的实现方法，代码都带注释，跟着走就行~

这个方法完全不需要依赖任何第三方库，纯原生HTML+JS就能搞定，特别适合新手快速搭建。我们可以通过JS动态生成年份选项，不用手动一个个写，省超多时间！

<!-- HTML部分：创建下拉选择框 -->
<label for="year-select">选择年份：</label>
<select id="year-select" name="year-filter"></select>

<script>
// JS部分：动态生成年份选项
// 获取下拉框元素
const yearSelect = document.getElementById('year-select');
// 获取当前年份
const currentYear = new Date().getFullYear();
// 设置起始年份，你可以根据需求改成自己需要的数值，比如1980
const startYear = 1990;

// 从当前年份倒推到起始年份，循环生成每个年份选项
for (let year = currentYear; year >= startYear; year--) {
  const option = document.createElement('option');
  option.value = year; // 设置选项的value值（提交表单时会用到）
  option.textContent = year; // 设置选项显示的文本
  yearSelect.appendChild(option); // 将选项添加到下拉框里
}
</script>

小提示：如果你的年份范围是固定的，也可以手动写<option>标签，比如<option value="2020">2020</option>，但动态生成的方式更灵活，每年都不用手动更新~

如果你觉得下拉列表不够美观，想用上更友好的日期选择器，那jQuery UI的Datepicker绝对是你的好帮手，配置起来超简单，而且界面也很清爽。

<!-- 先引入jQuery和jQuery UI的必要资源（直接复制这段就行） -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<!-- HTML部分：创建日期选择输入框 -->
<label for="year-picker">选择年份：</label>
<input type="text" id="year-picker" name="year-filter" readonly>

<script>
// 初始化年份选择器
$(function() {
  $("#year-picker").datepicker({
    changeYear: true, // 开启年份选择功能
    showButtonPanel: true, // 显示底部的按钮面板（比如"确定"按钮）
    dateFormat: 'yy', // 设置显示格式为仅年份（yy代表四位年份）
    onClose: function(dateText, inst) {
      // 关闭选择面板时，把选中的年份设置到输入框里
      const selectedYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      $(this).datepicker('setDate', new Date(selectedYear, 0, 1));
    }
  });

  // 点击输入框时，隐藏月份选择器，只显示年份选择
  $("#year-picker").focus(function() {
    $(".ui-datepicker-month").hide();
  });
});
</script>

小提示：给输入框加上readonly属性，可以防止用户手动输入内容，只能通过选择器选年份，避免无效输入~

内容的提问来源于stack exchange，提问作者Andri Setiawan