You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.21 06:45:32