如何在JSP中基于选中的年月下拉框展示对应月份的横向日历日期?
没问题,我来给你拆解这个需求的实现步骤,分三个关键部分来做,代码都是可直接复用的:
实现步骤详解
1. 先做日期选择页面(表单页)
先写一个JSP页面(比如命名为datePicker.jsp),包含年份、月份下拉框和提交按钮。年份下拉框用Java代码动态生成当前年份及之后两年的选项,月份则固定展示1-12月。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="java.time.Year" %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择年月</title> </head> <body> <h3>选择要查看的年月</h3> <form action="CalendarServlet" method="post"> <label>年份:</label> <select name="year"> <% int currentYear = Year.now().getValue(); // 生成当前年、下一年、下下年的选项 for(int i = 0; i < 3; i++) { int year = currentYear + i; %> <option value="<%= year %>"><%= year %></option> <% } %> </select> <label>月份:</label> <select name="month"> <% for(int i = 1; i <= 12; i++) { %> <option value="<%= i %>"><%= i %>月</option> <% } %> </select> <button type="submit">查看日历</button> </form> </body> </html>
如果你的项目用Java 8之前的版本,把Year.now().getValue()换成Calendar.getInstance().get(Calendar.YEAR)即可,记得导入java.util.Calendar包。
2. 后端Servlet处理逻辑
写一个Servlet(命名为CalendarServlet),接收表单提交的年月参数,计算当月总天数,生成日期列表后转发到展示页面。推荐用Java 8+的java.time API处理日期,比旧的Calendar类更直观。
import java.io.IOException; import java.util.ArrayList; import java.util.List; import java.time.LocalDate; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/CalendarServlet") public class CalendarServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 解决中文乱码问题 request.setCharacterEncoding("UTF-8"); // 获取表单参数并转换为整数 int year = Integer.parseInt(request.getParameter("year")); int month = Integer.parseInt(request.getParameter("month")); // 计算当月最后一天 LocalDate firstDay = LocalDate.of(year, month, 1); int lastDay = firstDay.lengthOfMonth(); // 生成1到当月最后一天的日期列表 List<Integer> dateList = new ArrayList<>(); for(int i = 1; i <= lastDay; i++) { dateList.add(i); } // 将数据存入request域,供展示页面使用 request.setAttribute("dateList", dateList); request.setAttribute("selectedYear", year); request.setAttribute("selectedMonth", month); // 转发到展示页面 request.getRequestDispatcher("/calendarDisplay.jsp").forward(request, response); } }
如果用Java 8之前的版本,替换日期计算部分为:
Calendar cal = Calendar.getInstance(); cal.set(year, month - 1, 1); // Calendar的月份是0-11,需要减1 int lastDay = cal.getActualMaximum(Calendar.DAY_OF_MONTH);
3. 日历展示页面
最后写calendarDisplay.jsp,从request域取出日期列表,横向展示所有日期。这里用表格一行实现横向排列,也可以用CSS flex布局,看你偏好。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="java.util.List" %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title><%= request.getAttribute("selectedYear") %>年<%= request.getAttribute("selectedMonth") %>月日历</title> <style> table { border-collapse: collapse; margin-top: 20px; } td { border: 1px solid #ccc; padding: 8px 12px; text-align: center; } .title { font-size: 1.2em; font-weight: bold; } </style> </head> <body> <div class="title"><%= request.getAttribute("selectedYear") %>年<%= request.getAttribute("selectedMonth") %>月</div> <table> <tr> <% List<Integer> dateList = (List<Integer>) request.getAttribute("dateList"); for(Integer date : dateList) { %> <td><%= date %></td> <% } %> </tr> </table> </body> </html>
额外提示
- 可以在Servlet里加参数校验,比如判断月份是否在1-12之间,非法参数就跳回选择页并提示错误。
- 如果想要更灵活的样式,把表格换成
div+display: inline-block或者flex布局也可以实现横向排列。
内容的提问来源于stack exchange,提问作者Venkata VL
相关产品推荐
相关产品推荐

