精确控制HTML时间输入框：隐藏AM/PM指示器与跨浏览器兼容性实践

input[type="time"] {
    width: 80%;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 2.5px;
    padding: 5px 10px; /* 示例：增加内边距 */
    font-size: 16px; /* 示例：调整字体大小 */
    color: #333; /* 示例：调整字体颜色 */
}

<input type="time" id="nativeTimeInput" name="eventTime" step="60" class="form-control" required/>

<!-- 隐藏的原生时间输入框，用于表单提交 -->
<input type="time" id="nativeTimeInput" name="eventTime" step="60" style="display: none;" required/>

<!-- 自定义时间选择器UI -->
<div class="custom-time-picker">
    <input type="number" id="customHour" min="0" max="23" placeholder="HH" class="time-field" aria-label="小时">
    <span class="separator">:</span>
    <input type="number" id="customMinute" min="0" max="59" placeholder="MM" class="time-field" aria-label="分钟">
</div>

.custom-time-picker {
    display: flex;
    align-items: center;
    width: 180px; /* 调整宽度 */
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 2.5px;
    padding: 5px;
}

.custom-time-picker .time-field {
    width: 60px; /* 调整输入框宽度 */
    text-align: center;
    border: none;
    outline: none;
    font-size: 16px;
    -moz-appearance: textfield; /* 隐藏Firefox的number input spinner */
}

.custom-time-picker .time-field::-webkit-inner-spin-button,
.custom-time-picker .time-field::-webkit-outer-spin-button {
    -webkit-appearance: none; /* 隐藏Chrome/Safari的number input spinner */
    margin: 0;
}

.custom-time-picker .separator {
    margin: 0 5px;
    font-size: 16px;
}

document.addEventListener('DOMContentLoaded', () => {
    const nativeTimeInput = document.getElementById('nativeTimeInput');
    const customHourInput = document.getElementById('customHour');
    const customMinuteInput = document.getElementById('customMinute');

    // 初始化：如果原生输入框有值，同步到自定义UI
    if (nativeTimeInput.value) {
        const [hour, minute] = nativeTimeInput.value.split(':');
        customHourInput.value = parseInt(hour, 10);
        customMinuteInput.value = parseInt(minute, 10);
    }

    // 监听自定义UI的变化，并同步到原生输入框
    function updateNativeTime() {
        let hour = parseInt(customHourInput.value, 10) || 0;
        let minute = parseInt(customMinuteInput.value, 10) || 0;

        // 确保小时和分钟在有效范围内
        hour = Math.max(0, Math.min(23, hour));
        minute = Math.max(0, Math.min(59, minute));

        // 格式化为 HH:MM
        const formattedTime = 
            String(hour).padStart(2, '0') + ':' + 
            String(minute).padStart(2, '0');

        nativeTimeInput.value = formattedTime;
    }

    customHourInput.addEventListener('input', updateNativeTime);
    customMinuteInput.addEventListener('input', updateNativeTime);

    // 可选：添加失去焦点时的验证和格式化
    customHourInput.addEventListener('blur', () => {
        let hour = parseInt(customHourInput.value, 10);
        if (isNaN(hour) || hour < 0 || hour > 23) {
            customHourInput.value = '00'; // 默认值或清空
        } else {
            customHourInput.value = String(hour).padStart(2, '0');
        }
        updateNativeTime();
    });

    customMinuteInput.addEventListener('blur', () => {
        let minute = parseInt(customMinuteInput.value, 10);
        if (isNaN(minute) || minute < 0 || minute > 59) {
            customMinuteInput.value = '00'; // 默认值或清空
        } else {
            customMinuteInput.value = String(minute).padStart(2, '0');
        }
        updateNativeTime();
    });
});