Primefaces DatePicker范围选择模式获取日期间隔总天数失效问题咨询

你代码中的核心错误点 #

• Ajax事件配置错误：你给DatePicker绑定了keyup事件，但范围选择是通过鼠标点击日期完成，不会触发键盘事件，PrimeFaces DatePicker选择完成后的标准触发事件是dateSelect
• Listener配置错误：p:ajax的listener属性需要绑定后端处理方法，你直接绑定了存储日期范围的属性#{ingresar.rango}，逻辑完全不匹配
• 天数取值错误：rango是存储两个日期的List<Date>类型，size属性只能拿到列表元素个数（最多为2），不是两个日期间的间隔天数，需要单独计算差值

修复方案 #

第一步：修改后端ManagedBean代码

调整你ingresar对应的Bean类，新增存总天数的属性和计算方法：

import java.io.Serializable;
import java.util.Date;
import java.util.List;
import java.util.concurrent.TimeUnit;
import javax.inject.Named;
import javax.faces.view.ViewScoped;

@Named
@ViewScoped
public class Ingresar implements Serializable {
    // 原有存储日期范围的属性
    private List<Date> rango;
    // 新增存储总天数的属性
    private Integer diasTotal;

    // 计算天数的Ajax监听方法
    public void calcularDias() {
        if (rango == null || rango.size() != 2) {
            diasTotal = null;
            return;
        }
        Date inicio = rango.get(0);
        Date fin = rango.get(1);
        // 计算毫秒差转天数，需要包含首尾日期的话最后+1即可
        long diffMs = fin.getTime() - inicio.getTime();
        diasTotal = Math.toIntExact(TimeUnit.DAYS.convert(diffMs, TimeUnit.MILLISECONDS));
    }

    // 补充getter、setter
    public List<Date> getRango() { return rango; }
    public void setRango(List<Date> rango) { this.rango = rango; }
    public Integer getDiasTotal() { return diasTotal; }
    public void setDiasTotal(Integer diasTotal) { this.diasTotal = diasTotal; }
}

第二步：修改前端页面代码

调整Ajax配置和inputText的绑定：

<div class="form-group row"> 
    <p:outputLabel for="rango" value="Nombramiento" class="col-sm-2 col-form-label"/>
    <div class="col-sm-4">
        <p:datePicker id="rango" inline="true" numberOfMonths="2" selectionMode="range" value="#{ingresar.rango}" readonlyInput="true" pattern="dd/MM/yyyy"/>
        <!-- 修改事件为dateSelect，listener绑定计算方法 -->
        <p:ajax event="dateSelect" process="rango" update="dias"
                listener="#{ingresar.calcularDias}"/>
    </div>
</div>
<div class="form-group row">
    <h:outputLabel value="Total de días" for="dias" class="col-sm-2 col-form-label"/>
    <div class="col-sm-4">
        <!-- value绑定计算好的总天数属性 -->
        <h:inputText id="dias" required="true" requiredMessage="Campo Obligatorio"
                     value="#{ingresar.diasTotal}" class="form-control"/>
        <h:message for="dias" class="text-danger"/>
    </div>
</div>

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