jQuery DatePicker问题：未选开始日期时禁用结束日期选择

Got it, let's resolve this issue where users can still pick an end date without selecting a start date first. Here's how to adjust your jQuery DatePicker code to enforce the required behavior:

Modified Code #

var dateToday = new Date(); 
$(function() { 
    // Initialize start date picker
    $("#datepicker1").datepicker({ 
        changeMonth: true, 
        changeYear: true, 
        dateFormat:'dd-M-yy', 
        // minDate: dateToday, 
        onSelect: function(selectedDate) { 
            // Enable end date picker and set its minimum date to the selected start date
            $("#end")
                .datepicker("enable")
                .datepicker("option", "minDate", selectedDate);
            
            // Clear end date if it's earlier than the new start date
            const endDate = $("#end").datepicker("getDate");
            if (endDate && endDate < new Date(selectedDate)) {
                $("#end").val("");
            }
        },
        onClose: function() {
            // If start date is cleared, disable end date picker and reset values
            if (!$("#datepicker1").val()) {
                $("#end")
                    .val("")
                    .datepicker("disable")
                    .datepicker("option", "minDate", null);
                
                $("#datepicker1").datepicker("option", "maxDate", null);
            }
        }
    }); 

    // Initialize end date picker (disabled by default)
    $("#end").datepicker({ 
        changeMonth: true, 
        changeYear: true, 
        dateFormat:'dd-M-yy', 
        // minDate: dateToday, 
        disabled: true, // Lock end date picker initially
        onClose: function(selectedDate) { 
            $("#datepicker1").datepicker("option", "maxDate", selectedDate); 
        } 
    }); 
});

Key Changes Explained #

• Initial Disable for End Date: We added disabled: true to the end date picker's initialization, so users can't open or select a date until a start date is chosen.
• Enable End Date on Start Date Selection: The onSelect event of the start date picker enables the end date picker and sets its minDate to the selected start date, maintaining your original "end date can't be earlier than start date" constraint.
• Handle Cleared Start Date: The onClose event checks if the start date input is empty. If so, it disables the end date picker, clears any existing end date value, and resets the date constraints to their default state.
• Clean Up Invalid End Dates: If the user picks a new start date that's later than an existing end date, we automatically clear the end date to avoid invalid date ranges.

This setup ensures users must select a start date before they can interact with the end date picker, while preserving your original date range validation.

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