Laravel项目datepicker选完开始日期后结束日期仍禁用问题求解

问题原因 #

1. 选择器拼写错误：你在#periode_start的changeDate事件中解除结束日期禁用时，选择器写为$("periode_end")，缺少ID选择器的#标识，导致代码无法匹配到结束日期输入框，禁用状态始终没有被移除。
2. 属性操作不规范：disabled是布尔类型属性，使用attr操作容易出现状态不同步的问题，jQuery更推荐使用prop方法操作这类属性。
3. 重复初始化风险：开头已经统一给所有带.dtpicker类的元素初始化了datepicker，如果#periode_start和#periode_end也带有该类，后续二次初始化可能导致事件绑定异常。

修正方案 #

最简修复版（直接修正原有代码错误） #

// Datepicker
$('.dtpicker').datepicker({
    startDate: new Date(),
    format: "dd-MM-yyyy",
    todayBtn: "linked",
    autoclose: true,
});

$(document).ready(function(){
    // 初始禁用结束日期，改用prop操作布尔属性
    $("#periode_end").prop("disabled", true);

    $("#periode_start").datepicker({
        todayBtn:  "linked",
        format: "dd-MM-yyyy",
        autoclose: true,
    }).on('changeDate', function (selected) {
        var minDate = new Date(selected.date.valueOf());
        // 修正ID选择器，解除禁用
        $("#periode_end").prop("disabled", false);
        $('#periode_end').datepicker('setStartDate', minDate);
    });

    $("#periode_end").datepicker({
        format: "dd-MM-yyyy",
        autoclose: true,
    }).on('changeDate', function (selected) {
        var maxDate = new Date(selected.date.valueOf());
        $('#periode_start').datepicker('setEndDate', maxDate);
    });
});

优化精简版（推荐） #

如果#periode_start和#periode_end都带有.dtpicker类，无需重复初始化，直接绑定事件即可：

$(document).ready(function(){
    // 统一初始化所有日期选择器
    $('.dtpicker').datepicker({
        startDate: new Date(),
        format: "dd-MM-yyyy",
        todayBtn: "linked",
        autoclose: true,
    });

    // 初始禁用结束日期
    $("#periode_end").prop("disabled", true);

    // 绑定开始日期变更事件
    $("#periode_start").on('changeDate', function (selected) {
        var minDate = new Date(selected.date.valueOf());
        $("#periode_end").prop("disabled", false);
        $('#periode_end').datepicker('setStartDate', minDate);
    });

    // 绑定结束日期变更事件
    $("#periode_end").on('changeDate', function (selected) {
        var maxDate = new Date(selected.date.valueOf());
        $('#periode_start').datepicker('setEndDate', maxDate);
    });
});

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