用js写一个日期下拉菜单,年份从1900到现在,月和日的下拉菜单
时间: 2024-05-14 11:14:13 浏览: 125
以下是使用JavaScript编写的日期下拉菜单,包括年份从1900到现在,月份和天数的下拉菜单。
HTML:
```html
<label for="date">Date:</label>
<select id="year"></select>
<select id="month"></select>
<select id="day"></select>
```
JavaScript:
```javascript
// 获取年份下拉菜单
var yearSelect = document.getElementById("year");
// 获取月份下拉菜单
var monthSelect = document.getElementById("month");
// 获取天数下拉菜单
var daySelect = document.getElementById("day");
// 设置年份下拉菜单选项
for (var i = new Date().getFullYear(); i >= 1900; i--) {
var option = document.createElement("option");
option.text = i;
option.value = i;
yearSelect.add(option);
}
// 设置月份下拉菜单选项
for (var i = 1; i <= 12; i++) {
var option = document.createElement("option");
option.text = i;
option.value = i;
monthSelect.add(option);
}
// 设置天数下拉菜单选项
function setDays() {
var year = yearSelect.value;
var month = monthSelect.value;
var days = new Date(year, month, 0).getDate();
// 清空天数下拉菜单
daySelect.innerHTML = "";
// 设置天数下拉菜单选项
for (var i = 1; i <= days; i++) {
var option = document.createElement("option");
option.text = i;
option.value = i;
daySelect.add(option);
}
}
// 初始化天数下拉菜单选项
setDays();
// 监听年份和月份下拉菜单的变化
yearSelect.onchange = setDays;
monthSelect.onchange = setDays;
```
使用上述代码可以生成日期下拉菜单,其中年份从1900到当前年份,月份从1到12,天数根据所选年份和月份变化。可以根据需要进一步对样式、布局等进行调整。
阅读全文