如何根据视频时长限制PrimeFaces DatePicker的时分秒可选范围？

我使用PrimeFaces的datePicker组件实现时分秒选择，默认小时范围0-24，分秒0-60。现在需要根据视频时长限制可选范围：比如视频时长1分30秒时，禁用小时上下箭头，分钟最大1，秒最大30。当前代码能在页面加载时显示最大时长，但点击箭头仍可随意修改值，求解决方法。

现有UI代码 #

<p:outputPanel styleClass="input-group timestamp-input">
    <p:datePicker id="timeDatePicker"
                  widgetVar="widgetVarOfDatePicker"
                  value="#{traineeDashboard.newIncidentTimestamp}"
                  timeOnly="true"
                  showSeconds="true"
                  appendTo="@this">
        <f:converter converterId="timeConverter"/>
    </p:datePicker>
</p:outputPanel>

现有JS代码 #

function setMaxTimeForDatePicker(hours, minutes, seconds) {
    var timePicker = PF('widgetVarOfDatePicker'); 
    var hoursDropdown = $('div.ui-hour-picker span:eq(1)');
    var minutesDropdown = $('div.ui-minute-picker span:eq(1)');
    var secondsDropdown = $('div.ui-second-picker span:eq(1)');

    hoursDropdown.text(hours);
    minutesDropdown.text(minutes);
    secondsDropdown.text(seconds);

    hoursDropdown.trigger('change');
    minutesDropdown.trigger('change');
    secondsDropdown.trigger('change');
}

$(function() {
    var timePicker = PF('widgetVarOfDatePicker'); // Replace with your actual widgetVar

    // Override the behaviors for incrementing and decrementing hours, minutes, and seconds
    timePicker.cfg.onHourChange = function(newHour) {
        let maxHour = 2;
        let minHour = 0;
        if (newHour < minHour || newHour > maxHour) {
            // Set the hour back to the minimum or maximum as appropriate
            this.setTime(minHour, this.currentMinute, this.currentSecond);
        }
    };

    timePicker.cfg.onMinuteChange = function(newMinute) {
        if (newMinute < minMinute || newMinute > maxMinute) {
            // Set the minute back to the minimum or maximum as appropriate
            this.setTime(this.currentHour, minMinute, this.currentSecond);
        }
    };

    timePicker.cfg.onSecondChange = function(newSecond) {
        if (newSecond < minSecond || newSecond > maxSecond) {
            // Set the second back to the minimum or maximum as appropriate
            this.setTime(this.currentHour, this.currentMinute, minSecond);
        }
    };
});

解决方案 #

1. 修正范围判断逻辑，补全变量定义 #

现有代码存在未定义变量、硬编码范围、逻辑不严谨的问题，以下是修正后的事件监听逻辑：

// 从后端或页面元素动态获取视频时长参数，示例值对应1分30秒
let maxHour = 0;
let maxMinute = 1;
let maxSecond = 30;
const minHour = 0;
const minMinute = 0;
const minSecond = 0;

$(function() {
    var timePicker = PF('widgetVarOfDatePicker');

    timePicker.cfg.onHourChange = function(newHour) {
        // 限制小时在合法范围内
        const validHour = Math.max(minHour, Math.min(newHour, maxHour));
        if (validHour !== newHour) {
            this.setTime(validHour, this.currentMinute, this.currentSecond);
        }
        this.currentHour = validHour;
        // 更新箭头状态
        updateArrowStates(this);
    };

    timePicker.cfg.onMinuteChange = function(newMinute) {
        // 小时达最大值时，分钟不能超过视频时长的分钟上限
        const maxAllowedMinute = this.currentHour === maxHour ? maxMinute : 59;
        const validMinute = Math.max(minMinute, Math.min(newMinute, maxAllowedMinute));
        if (validMinute !== newMinute) {
            this.setTime(this.currentHour, validMinute, this.currentSecond);
        }
        this.currentMinute = validMinute;
        // 更新箭头状态
        updateArrowStates(this);
    };

    timePicker.cfg.onSecondChange = function(newSecond) {
        // 小时和分钟都达最大值时，秒不能超过视频时长的秒上限
        const maxAllowedSecond = (this.currentHour === maxHour && this.currentMinute === maxMinute) ? maxSecond : 59;
        const validSecond = Math.max(minSecond, Math.min(newSecond, maxAllowedSecond));
        if (validSecond !== newSecond) {
            this.setTime(this.currentHour, this.currentMinute, validSecond);
        }
        this.currentSecond = validSecond;
        // 更新箭头状态
        updateArrowStates(this);
    };
});

2. 动态禁用超出范围的上下箭头 #

仅靠事件监听无法直观限制操作，需在选择器展开和值变化时，动态禁用箭头：

function updateArrowStates(timePicker) {
    // 获取各时间单位的上下箭头元素
    const hourUp = $('.ui-hour-picker .ui-icon-triangle-1-n');
    const hourDown = $('.ui-hour-picker .ui-icon-triangle-1-s');
    const minuteUp = $('.ui-minute-picker .ui-icon-triangle-1-n');
    const minuteDown = $('.ui-minute-picker .ui-icon-triangle-1-s');
    const secondUp = $('.ui-second-picker .ui-icon-triangle-1-n');
    const secondDown = $('.ui-second-picker .ui-icon-triangle-1-s');

    // 处理小时箭头
    hourUp.toggleClass('ui-state-disabled', timePicker.currentHour >= maxHour);
    hourDown.toggleClass('ui-state-disabled', timePicker.currentHour <= minHour);
    // 重新绑定/解绑点击事件
    hourUp.off('click').on('click', () => !hourUp.hasClass('ui-state-disabled') && timePicker.incrementHour());
    hourDown.off('click').on('click', () => !hourDown.hasClass('ui-state-disabled') && timePicker.decrementHour());

    // 处理分钟箭头
    const maxAllowedMinute = timePicker.currentHour === maxHour ? maxMinute : 59;
    minuteUp.toggleClass('ui-state-disabled', timePicker.currentMinute >= maxAllowedMinute);
    minuteDown.toggleClass('ui-state-disabled', timePicker.currentMinute <= minMinute);
    minuteUp.off('click').on('click', () => !minuteUp.hasClass('ui-state-disabled') && timePicker.incrementMinute());
    minuteDown.off('click').on('click', () => !minuteDown.hasClass('ui-state-disabled') && timePicker.decrementMinute());

    // 处理秒箭头
    const maxAllowedSecond = (timePicker.currentHour === maxHour && timePicker.currentMinute === maxMinute) ? maxSecond : 59;
    secondUp.toggleClass('ui-state-disabled', timePicker.currentSecond >= maxAllowedSecond);
    secondDown.toggleClass('ui-state-disabled', timePicker.currentSecond <= minSecond);
    secondUp.off('click').on('click', () => !secondUp.hasClass('ui-state-disabled') && timePicker.incrementSecond());
    secondDown.off('click').on('click', () => !secondDown.hasClass('ui-state-disabled') && timePicker.decrementSecond());
}

// 监听选择器展开事件，初始化箭头状态
$(function() {
    var timePicker = PF('widgetVarOfDatePicker');
    timePicker.cfg.onShow = function() {
        updateArrowStates(this);
    };
});

3. 修正初始化时长的函数 #

原函数直接修改DOM文本不会同步组件内部状态，改为调用组件官方方法：

function setMaxTimeForDatePicker(hours, minutes, seconds) {
    var timePicker = PF('widgetVarOfDatePicker');
    // 调用组件内置方法设置时间，同步内部状态
    timePicker.setTime(hours, minutes, seconds);
    // 更新箭头状态
    updateArrowStates(timePicker);
}

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