JavaScript实现日期选择器-优快云博客

本文链接：https://blog.youkuaiyun.com/wangshanny/article/details/25193689

本文展示了如何使用JavaScript创建一个日期下拉框。通过提供的源码，你可以了解实现这一功能的具体步骤和技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

源码实现：

<select id='selectYear' onchange="changeYear()">
		<%
			for (int i = (thisYear - 10); i < (thisYear + 10); i++) {
				if (i == thisYear) {
		%>
					<option value='<%=i%>' selected="selected"><%=i%></option>
				<%
				} else {
				%>
					<option value='<%=i%>'><%=i%></option>
				<% }
			}
		%>
</select>
<select id='selectWeek'></select>

//构造日期下拉框
function rendererCurrentWeek(year) {
	var firstDayOfYear = Date.parseDate(year + "0101", "Ymd");
	var day = firstDayOfYear.getDay();
	if (day == 0)
		day = 7;
	var firstDayOfWeek = firstDayOfYear.add(Date.DAY, -(day - 1));
	var lastDayOfWeek = firstDayOfWeek.add(Date.DAY, 6);
	var selectWeek = document.getElementById("selectWeek");
	//清除原有值，加入新值,这个地方document.getElementById不知道对不对，因为原来用的是其他标签,类似.select这种
	document.getElementById("#selectWeek option").remove();
	for ( var i = 1; i < (365 / 7 + 1); i++) {
		var optValue = firstDayOfWeek.format("Ymd") + "_"
				+ lastDayOfWeek.format("Ymd");
		//第i周（周一至周五），要显示第i周（周一至周天），去掉.add(Date.DAY, -2)就行
		var optText = "第" + i + "周(" + firstDayOfWeek.format("Y-m-d") + "至"
				+ lastDayOfWeek.add(Date.DAY, -2).format("Y-m-d") + ")";
		var item = new Option(optText, optValue);
		selectWeek.options.add(item);
		firstDayOfWeek = lastDayOfWeek.add(Date.DAY, 1);
		lastDayOfWeek = firstDayOfWeek.add(Date.DAY, 6);
	}
}

测试通过！