如何修改Jet Appointment插件预约前锁定时间的上限限制？

问题根源 #

当前使用的cx-vui-time组件默认采用HH:mm格式，该格式限制小时数最大为23，同时组件内部可能存在输入校验，导致无法设置超过24小时的锁定时间。另外原getTimeSettings函数仅提取moment.duration中的小时字段（0-23），未计算天数转换的小时数，无法正确展示超过24小时的时间。

解决方案思路 #

1. 调整时间组件的格式规则，支持大于24的小时数；
2. 修改时间转换函数，正确计算并展示总小时数；
3. 若组件本身存在硬限制，替换为更灵活的数字输入组件组合。

方案一：修改现有cx-vui-time组件 #

1. 调整模板中的组件格式

将原组件的format属性从HH:mm改为H:mm，支持无限制的小时数输入：

<cx-vui-time
    class="jet-apb-working-hours__main-settings"
    label="<?php esc_html_e( 'Locked Time Before', 'jet-appointments-booking' ); ?>"
    description="<?php esc_html_e( 'The appointment cannot be made if there is less than this time left.', 'jet-appointments-booking' ); ?>"
    :wrapper-css="[ 'equalwidth' ]"
    :size="'fullwidth'"
    placeholder="00:00"
    :value="getTimeSettings( 'locked_time' )"
    format="H:mm"
    @input="onUpdateTimeSettings( {
        key: 'locked_time',
        value: $event,
    } )"
></cx-vui-time>

2. 更新getTimeSettings函数

修改函数逻辑，计算包含天数在内的总小时数：

getTimeSettings: function( key ) {
    const duration = moment.duration( parseInt( this.settings[ key ] ), 'seconds' );
    const totalHours = duration.days() * 24 + duration.hours();
    const minutes = duration.minutes() < 10 ? `0${duration.minutes()}` : duration.minutes();
    return `${totalHours}:${minutes}`;
}

3. 修正时间解析逻辑（onUpdateTimeSettings）

确保输入的H:mm格式能正确转换为秒数：

onUpdateTimeSettings: function( params ) {
    const [ hoursStr, minutesStr ] = params.value.split(':');
    const hours = parseInt( hoursStr ) || 0;
    const minutes = parseInt( minutesStr ) || 0;
    const totalSeconds = ( hours * 60 + minutes ) * 60;
    
    this.settings[ params.key ] = totalSeconds;
    // 保留原有的后台保存逻辑（如AJAX提交）
}

方案二：替换为数字输入组件（彻底避开组件限制） #

如果cx-vui-time组件存在硬编码的小时上限，直接替换为两个独立的数字输入框：

1. 修改模板代码

<div class="jet-apb-locked-time-group">
    <cx-vui-number-input
        label="<?php esc_html_e( 'Locked Hours Before', 'jet-appointments-booking' ); ?>"
        :value="getLockedTimeHours( 'locked_time' )"
        @input="updateLockedTime( 'locked_time', 'hours', $event )"
        min="0"
        size="fullwidth"
    ></cx-vui-number-input>
    <cx-vui-number-input
        label="<?php esc_html_e( 'Locked Minutes Before', 'jet-appointments-booking' ); ?>"
        :value="getLockedTimeMinutes( 'locked_time' )"
        @input="updateLockedTime( 'locked_time', 'minutes', $event )"
        min="0"
        max="59"
        size="fullwidth"
    ></cx-vui-number-input>
</div>

2. 添加对应处理方法

// 获取小时数（含天数转换）
getLockedTimeHours: function( key ) {
    const duration = moment.duration( parseInt( this.settings[ key ] ), 'seconds' );
    return duration.days() * 24 + duration.hours();
},
// 获取分钟数
getLockedTimeMinutes: function( key ) {
    const duration = moment.duration( parseInt( this.settings[ key ] ), 'seconds' );
    return duration.minutes();
},
// 更新锁定时间
updateLockedTime: function( key, type, value ) {
    const currentDuration = moment.duration( parseInt( this.settings[ key ] ), 'seconds' );
    const hours = type === 'hours' ? parseInt( value ) : ( currentDuration.days() * 24 + currentDuration.hours() );
    const minutes = type === 'minutes' ? parseInt( value ) : currentDuration.minutes();
    const totalSeconds = ( hours * 60 + minutes ) * 60;
    
    this.settings[ key ] = totalSeconds;
    // 执行后台保存逻辑
}

额外注意事项 #

• 确认后台存储字段类型：确保保存locked_time的数据库字段为INT或BIGINT，足够存储大秒数（如7天=604800秒，INT类型完全支持）；
• 测试前端展示与后台同步：修改后需验证输入的长时长能正确保存、读取并在前端展示。

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