html和原生js实现年月或者日期选择并设置默认值
以下是使用HTML和原生JavaScript实现日期选择并设置默认值的简单示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date Picker Example</title>
<script>
function setDefaultDate() {
var defaultDate = "2023-03-01"; // 设置默认日期格式为 "年-月-日"
var dateParts = defaultDate.split("-");
var year = dateParts[0];
var month = dateParts[1] - 1; // 月份是从0开始的，所以减1
var day = dateParts[2];
document.getElementById("year").value = year;
document.getElementById("month").value = month;
document.getElementById("day").value = day;
}
</script>
</head>
<body onload="setDefaultDate()">
<form>
<label for="year">Year:</label>
<select id="year">
<!-- 这里应该是年份的选择，可以用JavaScript生成 -->
</select>
<label for="month">Month:</label>
<select id="month">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<label for="day">Day:</label>
<select id="day">
<!-- 这里应该是每个月的日期选择，可以用JavaScript生成 -->
</select>
</form>
</body>
</html>在这个例子中，我们设置了一个默认日期2023-03-01，并在页面加载完成时通过onload事件调用setDefaultDate函数来设置这个日期。这个函数将默认日期分割成年、月和日，并分别设置到对应的select元素中。注意，月份下拉菜单中的值是从0开始的，所以当你设置月份时需要减去1。日期下拉菜单中的值应该是动态生成的，这里为了简化例子，没有包括动态生成日期的代码。
评论已关闭