datetime-local日期校验问题：无法设置未来起始及结束日期规则

Got it, let's work through adding those date validation rules step by step. We'll cover both frontend checks for instant user feedback and backend validation to make sure bad data doesn't slip through—since frontend checks can be bypassed.

1. Frontend Client-Side Validation #

First, we'll add real-time validation to the form inputs and block form submission if rules are violated. We'll also add error messages to guide users.

Update the HTML #

Add error message containers next to each date input to display validation feedback:

<tr>
    <td><label for="maintsd">Maintenance Start Date (<%=tzShort%>)</label></td>
    <td>
        <input style="border:1px solid grey; width: 100%" type="datetime-local" id="maintsd" required="true" name="maintsd">
        <span class="error-message" style="color: red; font-size: 0.8em; display: block;"></span>
    </td>
    <td></td>
</tr>
<tr>
    <td><label for="mainted">Maintenance End Date (<%=tzShort%>)</label></td>
    <td>
        <input style="border:1px solid grey; width: 100%" type="datetime-local" id="mainted" required="true" name="mainted">
        <span class="error-message" style="color: red; font-size: 0.8em; display: block;"></span>
    </td>
</tr>

Add JavaScript Validation Logic #

Add this script to handle real-time checks and form submission validation:

// Grab references to inputs and error elements
const startDateInput = document.getElementById('maintsd');
const endDateInput = document.getElementById('mainted');
const startError = startDateInput.nextElementSibling;
const endError = endDateInput.nextElementSibling;

// Validate start date is in the future
function checkStartDate() {
    const startDate = new Date(startDateInput.value);
    const now = new Date();
    now.setMilliseconds(0); // Match datetime-local's precision (no milliseconds)

    if (startDate <= now) {
        startError.textContent = "* Must be a future date/time";
        return false;
    } else {
        startError.textContent = "";
        // Re-check end date if start date changes
        checkEndDate();
        return true;
    }
}

// Validate end date is after start date
function checkEndDate() {
    const startDate = new Date(startDateInput.value);
    const endDate = new Date(endDateInput.value);

    if (!startDateInput.value) {
        endError.textContent = "* Enter a start date first";
        return false;
    }

    if (endDate <= startDate) {
        endError.textContent = "* Must be later than start date";
        return false;
    } else {
        endError.textContent = "";
        return true;
    }
}

// Attach real-time validation listeners
startDateInput.addEventListener('input', checkStartDate);
endDateInput.addEventListener('input', checkEndDate);

// Block form submission if validation fails
document.querySelector('form').addEventListener('submit', (e) => {
    const isStartValid = checkStartDate();
    const isEndValid = checkEndDate();

    if (!isStartValid || !isEndValid) {
        e.preventDefault();
        alert("Please fix the date errors before submitting.");
    }
});

2. Backend Server-Side Validation #

Frontend checks can be bypassed, so we need to enforce the rules on the server too.

Add Validation to Your Java Logic #

Add this method to your entity/service class to validate the dates before saving:

public void validateMaintenanceDates() {
    Instant currentTime = Instant.now();
    
    // Check if start date is in the future
    if (this.maintSD == null || this.maintSD.isBefore(currentTime) || this.maintSD.equals(currentTime)) {
        throw new IllegalArgumentException("Maintenance Start Date must be a future time.");
    }
    
    // Check if end date is after start date
    if (this.maintED == null || this.maintED.isBefore(this.maintSD) || this.maintED.equals(this.maintSD)) {
        throw new IllegalArgumentException("Maintenance End Date must be later than Start Date.");
    }
}

Call this method before persisting the data (e.g., in your save/update service method).

Quick Note on Date Formatting #

Your current getMaintSDString() and getMaintEDString() use hh:mm (12-hour format), which can cause ambiguity (AM/PM confusion). Switch to HH:mm (24-hour format) for clarity:

this.maintSDString = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm").format(datetime);

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