PrimeFaces范围选择DatePicker单选日期无法获取值如何解决

问题背景 #

• 项目中使用PrimeFaces范围选择（selectionMode="range"）模式的DatePicker组件，需要同时支持日期区间选择、单个日期选择两种场景
• 实测选中单个日期时组件默认返回空数组，无法获取选中值：组件内部逻辑仅在选中两个日期、完成完整区间选择时才会返回有效值，该内部逻辑无法直接覆写修改
• 最初尝试通过JavaScript直接读取组件内部存储的日期数组首元素作为单日期值，但PrimeFaces未暴露相关内部类、函数的公开访问入口，直接通过全局变量取值的方式无效

组件范围选择对应内部逻辑片段：

if (this.isRangeSelection()) {
    if (this.value && this.value.length) {
        var b = this.value[0],
            g = this.value[1];
        d = this.formatDateTime(b);
        if (g) {
            d += " " + this.options.rangeSeparator + " " + this.formatDateTime(g)
        }
    }
}

原有失效实现 #

1. 错误的JS取值逻辑（尝试通过全局变量访问内部值，未使用官方公开API）：

<script type="text/javascript">
function getArrayValue(){
    console.log("inFunction");
    console.log(window.d.value[0]);
}
</script>

2. 组件绑定逻辑（直接绑定onblur事件触发上述函数）：

<div class="p-field p-col-12 p-md-4">
    <p:datePicker id="range" selectionMode="range"
            value="#{SearchBean.range}" onblur="getArrayValue()">
    </p:datePicker>
</div>

可行实现方案 #

PrimeFaces为所有组件提供了标准的公开实例获取方式，不需要依赖未暴露的内部变量，全版本兼容：

1. 首先给DatePicker组件添加widgetVar属性，声明组件实例的公开访问标识：

<div class="p-field p-col-12 p-md-4">
    <p:datePicker id="range" 
            widgetVar="rangeDatePicker"
            selectionMode="range"
            value="#{SearchBean.range}" 
            onblur="getPickerValue()">
    </p:datePicker>
</div>

2. 修改JS取值逻辑，通过官方PF()方法获取组件实例，直接读取实例上的value数组，单日期、区间日期场景都能正确获取值：

function getPickerValue() {
    // 通过官方公开API获取组件实例，无兼容问题
    const datePicker = PF('rangeDatePicker');
    if (!datePicker.value || datePicker.value.length === 0) {
        console.log('未选择任何日期');
        return null;
    }

    const startDate = datePicker.value[0];
    const endDate = datePicker.value[1];

    // 单日期场景处理
    if (!endDate) {
        console.log('当前选中单个日期：', datePicker.formatDateTime(startDate));
        // 如需修正输入框显示（去掉空的分隔符后缀）可放开下面注释
        // datePicker.input.val(datePicker.formatDateTime(startDate));
        // 如需传值给后端，可将值赋值给隐藏域或触发ajax请求
        return {
            selectedDate: startDate,
            dateRange: null
        }
    }

    // 正常区间场景处理
    console.log('当前选中日期区间：', datePicker.formatDateTime(startDate), '至', datePicker.formatDateTime(endDate));
    return {
        selectedDate: null,
        dateRange: [startDate, endDate]
    }
}

注意事项 #

• 不要尝试访问组件压缩后混淆的内部全局变量（比如之前代码里的window.d），PrimeFaces发布版本会对JS内部变量做短名混淆，不同版本、不同编译环境下变量名都会变化，这类写法随时会失效
• 如需将单日期值同步给后端Bean，可以在获取到值之后，将值赋值给页面上的<p:inputHidden>绑定的后端属性，再触发ajax事件提交即可
• 方案完全基于PrimeFaces公开API实现，不需要修改组件源码，升级PrimeFaces版本也不会出现兼容问题

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