JSP表单无JavaScript客户端日期验证及日期选择器显示问题

Hey there! Let's break down your date input problems one by one, since you're working with Tomcat 7 and want to avoid JavaScript entirely.

Why isn't the <input type="date"> picker showing up? #

First off, Tomcat 7 itself doesn't block HTML5 input elements—this is almost certainly a browser support issue. The date input type is an HTML5 feature, and older browsers (like Internet Explorer, or really old versions of Chrome/Firefox) don't support it. When unsupported, it falls back to a plain text input.

Quick check: Make sure your page starts with the HTML5 doctype (<!DOCTYPE html>) at the very top. If you're using an older doctype (like XHTML 1.0), browsers might render the page in quirks mode and ignore HTML5 features.

Can I use a text input for date validation without JS? #

Sort of, but with big limitations. HTML5's pattern attribute can enforce a date format (like pattern="\d{4}-\d{2}-\d{2}" for YYYY-MM-DD), but:

• The min and max attributes don't work with text inputs—they only apply to date/time-related input types.
• You can't dynamically handle month-specific days (like February having 28/29 days) with pure HTML.

The only reliable way to validate dates (including range checks and valid day counts) without JavaScript is server-side validation. When the form submits, use Java code in your JSP to parse the input, check if it's a valid date, and verify it falls within your desired range. For example:

String dobStr = request.getParameter("dob");
try {
    LocalDate dob = LocalDate.parse(dobStr); // Uses YYYY-MM-DD format
    LocalDate minDate = LocalDate.of(1900, 1, 1);
    LocalDate maxDate = LocalDate.now();
    if (dob.isBefore(minDate) || dob.isAfter(maxDate)) {
        // Show error message
    }
} catch (DateTimeParseException e) {
    // Invalid date format
}

(If your JDK is pre-8, use SimpleDateFormat instead, but be careful with its quirks.)

Is a dropdown approach feasible? And how to link them? #

Absolutely! Dropdowns for year/month/day are a solid alternative, and you can make them "联动" (dynamically update options) without JavaScript—by using server-side form submissions. Here's how to implement it:

Step-by-step implementation:

1. Create a form with three <select> elements for year, month, and day. Set the form to submit to the same JSP.
2. Add an onchange="this.form.submit()" attribute to the year and month dropdowns—this triggers a form submit whenever the user selects a new year/month, which lets the server generate the correct day options.
3. In your JSP's Java code block:
   • Fetch the selected year and month from the request parameters.
   • Calculate the number of days in the selected month (accounting for leap years for February).
   • Generate the <option> elements for each dropdown, pre-selecting the user's previous choices if they exist.
4. Add server-side validation for the final selected date to ensure it's valid and within your range.

Example code:

<%@ page import="java.time.YearMonth" %>
<%@ page import="java.time.LocalDate" %>
<!DOCTYPE html>
<html>
<head>
    <title>Date of Birth Selection</title>
</head>
<body>
    <form method="post" action="">
        <%-- Year Dropdown --%>
        <select name="year" onchange="this.form.submit()">
            <% int currentYear = LocalDate.now().getYear(); %>
            <% for (int y = 1900; y <= currentYear; y++) { %>
                <option value="<%= y %>" 
                    <%= request.getParameter("year") != null && request.getParameter("year").equals(String.valueOf(y)) ? "selected" : "" %>>
                    <%= y %>
                </option>
            <% } %>
        </select>

        <%-- Month Dropdown --%>
        <select name="month" onchange="this.form.submit()">
            <% for (int m = 1; m <= 12; m++) { %>
                <option value="<%= m %>" 
                    <%= request.getParameter("month") != null && request.getParameter("month").equals(String.valueOf(m)) ? "selected" : "" %>>
                    <%= m %>
                </option>
            <% } %>
        </select>

        <%-- Day Dropdown (dynamically generated) --%>
        <select name="day">
            <% 
                String selectedYear = request.getParameter("year");
                String selectedMonth = request.getParameter("month");
                int daysInMonth = 31; // Default to 31 days
                
                if (selectedYear != null && selectedMonth != null) {
                    int year = Integer.parseInt(selectedYear);
                    int month = Integer.parseInt(selectedMonth);
                    daysInMonth = YearMonth.of(year, month).lengthOfMonth();
                }
                
                for (int d = 1; d <= daysInMonth; d++) { %>
                    <option value="<%= d %>" 
                        <%= request.getParameter("day") != null && request.getParameter("day").equals(String.valueOf(d)) ? "selected" : "" %>>
                        <%= d %>
                    </option>
                <% } %>
        </select>

        <button type="submit">Submit</button>
    </form>

    <%-- Server-side Validation Result --%>
    <% if ("POST".equals(request.getMethod()) && request.getParameter("year") != null && request.getParameter("month") != null && request.getParameter("day") != null) { %>
        <% 
            int year = Integer.parseInt(request.getParameter("year"));
            int month = Integer.parseInt(request.getParameter("month"));
            int day = Integer.parseInt(request.getParameter("day"));
            
            try {
                LocalDate dob = LocalDate.of(year, month, day);
                LocalDate today = LocalDate.now();
                
                if (dob.isAfter(today)) { %>
                    <p style="color: red;">Oops! Date of birth can't be in the future.</p>
                <% } else { %>
                    <p style="color: green;">Valid date: <%= dob %></p>
                <% }
            } catch (Exception e) { %>
                <p style="color: red;">Invalid date combination. Please check your selection.</p>
            <% } %>
    <% } %>
</body>
</html>

Note for pre-Java 8 environments:

If your Tomcat 7 setup uses JDK 7 or earlier, replace the YearMonth code with this to calculate days in the month:

Calendar cal = Calendar.getInstance();
cal.set(Calendar.YEAR, Integer.parseInt(selectedYear));
cal.set(Calendar.MONTH, Integer.parseInt(selectedMonth) - 1); // Calendar months are 0-indexed
daysInMonth = cal.getActualMaximum(Calendar.DAY_OF_MONTH);

Final Takeaways: #

• Stick with <input type="date"> if you can ensure users are on modern browsers—just confirm your page uses the HTML5 doctype.
• For older browser support, the dropdown approach is reliable, and server-side submissions handle the dynamic option updates without JS.
• Always validate dates on the server side, no matter what input method you use—client-side checks can be bypassed.

内容的提问来源于stack exchange，提问作者user8029928