技术问询：当P1_CURRENTDATE晚于交互式网格的P1_ENDTIME时禁用按钮

核心思路 #

通过获取交互式网格选中行的结束时间值，与存储当前日期的项做比较，根据结果控制目标按钮的启用/禁用状态。

具体实现步骤 #

1. 统一日期格式 #

先确保P1_ENDTIME和P1_CURRENTDATE的日期格式一致（例如统一为YYYY-MM-DD），避免比较时因格式差异出错。可在APEX页面设计中，将两个项的格式设置与交互式网格的ENDTIME列格式保持统一。

2. 获取交互式网格选中行的结束时间值 #

在交互式网格的行选择事件中，把选中行的ENDTIME列值赋值给P1_ENDTIME，同时触发日期比较逻辑：

// 替换为你的交互式网格静态ID
const ig = apex.region("ig_target").widget().interactiveGrid("getViews", "grid");

ig.model.subscribe(function(event, data) {
    if (event.type === "selectionChange") {
        const selectedRow = ig.view.getSelectedRecords()[0];
        if (selectedRow) {
            // 替换为你的ENDTIME列名
            const endTimeVal = selectedRow[ig.model.getFieldKey("ENDTIME")];
            apex.item("P1_ENDTIME").setValue(endTimeVal);
            // 触发按钮状态检查
            toggleButtonStatus();
        }
    }
});

3. 编写日期比较与按钮控制函数 #

创建JavaScript函数，完成日期比较并控制目标按钮状态：

function toggleButtonStatus() {
    const endTime = apex.item("P1_ENDTIME").getValue();
    const currentDate = apex.item("P1_CURRENTDATE").getValue();
    
    // 转换为Date对象进行比较
    const endDateObj = new Date(endTime);
    const currDateObj = new Date(currentDate);
    
    // 替换为目标按钮的静态ID
    const targetBtn = document.querySelector("#btn_operate");
    
    if (currDateObj > endDateObj) {
        targetBtn.disabled = true;
        // 可选：添加禁用样式匹配APEX默认风格
        targetBtn.classList.add("apex-button-disabled");
    } else {
        targetBtn.disabled = false;
        targetBtn.classList.remove("apex-button-disabled");
    }
}

4. 初始化与动态触发 #

在页面加载完成、P1_CURRENTDATE值变化时，自动触发检查逻辑：

// 页面加载完成后执行一次检查
apex.jQuery(document).ready(function() {
    toggleButtonStatus();
});

// 当当前日期项值变化时重新检查
apex.item("P1_CURRENTDATE").on("change", function() {
    toggleButtonStatus();
});

注意事项 #

• 若交互式网格支持多选，需调整代码处理多行选中场景（如仅取第一行或按业务逻辑处理）。
• 带时间的日期需考虑时区影响，确保转换逻辑符合业务需求。
• 按钮静态ID需与页面设计中的实际ID一致，避免无法定位元素。

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