datepicker选中日期后实现div显示/隐藏的相关问题

问题原因 #

事件触发失败通常由两个常见问题导致：

• 没有使用datepicker官方提供的事件回调，或者事件绑定时机早于datepicker初始化完成的时机
• 输入框设置了readOnly="true"属性，默认的change/input原生事件不会被自动触发，datepicker赋值后如果没有主动推送事件，普通DOM事件监听就会失效

解决方案 #

直接在你现有可正常运行的jq11(document).ready回调中添加对应逻辑即可，两种方案选其一即可：

方案1：使用datepicker官方onSelect事件（最稳定，推荐） #

jq11(document).ready(function () {
    init('@lcid');
    initLocalEvents();
    window.loader.hide();
    selectionTrigger('@ViewBag.Selection');

    // 绑定日期选中回调
    jq11('[data_role="data-input"]').datepicker('option', 'onSelect', function(selectedDate) {
        const targetDiv = jq11('[data-role="data-div"]'); // 替换为你要控制的div选择器
        // 以下为示例显隐逻辑，可自行修改
        if (selectedDate) {
            targetDiv.show();
        } else {
            targetDiv.hide();
        }
        // 如果需要同步触发输入框的change事件可放开下一行注释
        // jq11(this).trigger('change');
    });
});

方案2：监听输入框change事件（适合存在其他修改输入框值的场景） #

jq11(document).ready(function () {
    init('@lcid');
    initLocalEvents();
    window.loader.hide();
    selectionTrigger('@ViewBag.Selection');

    // 监听输入框值变化
    jq11('[data_role="data-input"]').on('change', function() {
        const currentVal = jq11(this).val();
        const targetDiv = jq11('[data-role="data-div"]'); // 替换为你要控制的div选择器
        // 以下为示例显隐逻辑，可自行修改
        currentVal ? targetDiv.show() : targetDiv.hide();
    });
});

注意事项 #

• 如果你项目的datepicker是在init('@lcid')函数内完成初始化的，必须把事件绑定逻辑放在init调用之后，否则datepicker实例未创建，绑定会失效
• 注意区分属性名：你的输入框自定义属性是data_role（下划线），datepicker容器的自定义属性是data-role（中划线），选择器不要写错属性名

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