如何根据选择的Start Date自动匹配对应年度的31-03格式End Date？

Hi there! Great question – you can absolutely handle this with jQuery (since you're already using jQuery UI Datepicker) without needing PHP for the frontend interaction. PHP would only come into play if you needed to validate the date pair on the backend, but for the auto-populating behavior, jQuery is perfect.

Core Logic #

Your fiscal year runs from April 1st to March 31st of the following year. So the rule for determining the end date is:

• If the selected start date is between April 1st and December 31st of a given year, the end date is March 31st of the next year
• If the selected start date is between January 1st and March 31st, the end date is March 31st of the same year

Modified Code #

Here's how to update your existing jQuery and HTML to implement this:

Updated HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="form-group">
    <label>Start Date</label>
    <input type="text" name="start_date" placeholder="Start Date" id="start_date" class="start_date form-control">
</div>
<div class="form-group">
    <label>End Date</label>
    <!-- Make end date read-only if you don't want users to edit it -->
    <input type="text" name="end_date" id="end_date" placeholder="End Date" class="end_date form-control" readonly>
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Updated jQuery

$(function() {
    var currentYear = (new Date).getFullYear();
    
    $(".start_date").datepicker({
        showOn: "button",
        buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
        buttonImageOnly: true,
        buttonText: "Select date",
        dateFormat: "dd-mm-yy",
        changeMonth: true,
        changeYear: true,
        minDate: 0,
        maxDate: new Date(currentYear, 2, 31), // March is index 2 (0-based)
        showAnim: "clip",
        numberOfMonths: 1,
        // This callback triggers when a date is selected
        onSelect: function(selectedDate) {
            // Parse the selected date (format: dd-mm-yy)
            var dateParts = selectedDate.split("-");
            var day = parseInt(dateParts[0]);
            var month = parseInt(dateParts[1]) - 1; // Convert to 0-based
            var year = parseInt(dateParts[2]);
            
            let endYear;
            // Determine the end year based on the selected month
            if (month >= 3) { // April (3) to December (11)
                endYear = year + 1;
            } else { // January (0) to March (2)
                endYear = year;
            }
            
            // Format the end date as "31-03-YYYY"
            var endDate = `31-03-${endYear}`;
            
            // Set the end date input value
            $(".end_date").val(endDate);
            
            // Optional: Update the end date picker's constraints if you want to allow editing
            $(".end_date").datepicker("option", "minDate", selectedDate);
            $(".end_date").datepicker("option", "maxDate", endDate);
        }
    });
    
    $(".end_date").datepicker({
        showOn: "button",
        buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
        buttonImageOnly: true,
        buttonText: "Select date",
        dateFormat: "dd-mm-yy",
        changeMonth: true,
        changeYear: true,
        minDate: 0,
        maxDate: new Date(currentYear, 2, 31),
        showAnim: "clip"
    });
});

Key Explanations #

1. onSelect Callback: This is the heart of the solution – it runs every time a user picks a start date. We split the selected date string, convert it to a JavaScript-friendly format, then calculate the correct end year.
2. Date Parsing: Since your date format is dd-mm-yy, we split the string by - and adjust the month to be 0-based (JavaScript months start at 0 for January).
3. End Year Calculation: Check if the selected month is April or later – if so, the end date falls in the next year. Otherwise, it's the same year.
4. Read-only End Date: I added readonly to the end date input to prevent users from modifying it manually, but you can remove this if you want to let users adjust it (the code still updates the picker's constraints to keep it valid).

Notes #

• The maxDate for the start date is set to March 31st of the current year (since you mentioned you're in the 2018-2019 cycle – adjust this if your current cycle changes later).
• If you need to validate the date pair on the backend (e.g., when submitting the form), you can use PHP to re-check the logic to ensure no tampered values are submitted.

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