将 Primefaces datePicker 小时、分钟和秒限制为给定值

Question

我使用 datePicker Primefaces 元素来允许用户选择小时、分钟和秒的值。目前，小时的值介于 0 到 24 之间，分钟的值介于 0 到 60 之间，秒的值也相同。

我想将这种选择的可能性限制为一些静态值，这些静态值是通过获取页面上发布的视频的长度而获得的。

因此，例如，如果视频有 1 分 30 秒，我希望小时部分不允许用户按向上或向下箭头，分钟部分最大为 30，分钟部分为 1。 我尝试了下面的代码，但它不起作用 - 当我进入页面时，我设法看到视频的最大长度，但如果我从 datePicker 元素移动箭头，我可以选择任何内容。

我能做什么？

UI datePicker 元素：

<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>

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);
        }
    };
});

Answer 1

使用

minDate

组件的

maxDate

和

p:datePicker

属性。由于您想限制时间（小时、分钟、秒），因此可以将

minDate

和

maxDate

设置为同一日期，但时间不同。

首先，您需要创建一个

java.util.Date

对象，其中包含您想要允许的最长时间。您可以通过创建

java.util.Calendar

对象，设置小时、分钟和秒，然后获取

java.util.Date

对象来完成此操作。

示例；

Calendar calendar = Calendar.getInstance();
calendar.set(Calendar.HOUR_OF_DAY, maxHour);
calendar.set(Calendar.MINUTE, maxMinute);
calendar.set(Calendar.SECOND, maxSecond);
Date maxTime = calendar.getTime();

然后，将此

Date

对象设置为

maxDate

组件的

p:datePicker

属性。

在上面的代码中，

traineeDashboard.minDate

和

traineeDashboard.maxTime

是您在托管bean中创建的

Date

对象。

这样，用户将无法选择超出您指定范围的时间。

请记住将

minDate

和

maxDate

属性设置为相同日期，但时间不同。例如，如果您希望允许的时间范围为 00:00:00 到 01:30:00，则可以将

minDate

设置为 00:00:00，将

maxDate

设置为 01:30:00。

另请注意，

minDate

和

maxDate

属性接受

java.util.Date

对象，而不是

java.time.LocalDateTime

或

java.time.LocalTime

对象。如果您使用

java.time

类，则可以使用

java.util.Date

类或

java.sql.Timestamp

类将它们转换为

java.time.Instant

对象。