在需要用户输入年月信息时，网页中常见的做法是用下拉框或者日期选择器。但是有时候我们需要更加个性化的年月选择器，那么Javascript就成了我们的救星。
首先，我们需要明确一点：Javascript并没有自带的年月选择器，需要我们自己编写代码实现。接下来，我们就来介绍几种常见的实现方式。
第一种方式是利用HTML5中的date类型，但是需要注意的是该方法的兼容性并不完美。代码如下：
<label for="date1">请选择日期:</label>
<input type="date" id="date1">
<script>
document.getElementById("date1").addEventListener("change", function() {
console.log(this.value);
});
</script><div>
<label for="year_input">请选择年份:</label>
<input type="text" id="year_input">
</div>
<div>
<label for="month_input">请选择月份:</label>
<input type="text" id="month_input">
</div>
<script>
var year_input = document.getElementById("year_input");
var month_input = document.getElementById("month_input");
// 创建年份选择器
for (var y = 1990; y <= 2100; y++) {
var option = document.createElement("option");
option.value = y;
option.text = y;
year_input.add(option);
}
// 创建月份选择器
for (var m = 1; m <= 12; m++) {
var option = document.createElement("option");
option.value = m;
option.text = m;
month_input.add(option);
}
// 选择年份和月份后的回调函数
function onInputChanged() {
var year = year_input.value;
var month = month_input.value;
alert("您选择了" + year + "年" + month + "月");
}
year_input.addEventListener("change", onInputChanged);
month_input.addEventListener("change", onInputChanged);
</script><div>
<label for="datepicker">请选择日期:</label>
<input type="text" id="datepicker">
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
$("#datepicker").datepicker({
dateFormat: "yy年mm月",
changeMonth: true,
changeYear: true,
yearRange: "1950:2050",
onSelect: function(dateText) {
alert("您选择了" + dateText);
}
});
});
</script>