如何为type=time类型的input输入框添加增减调节箭头

方案1：原生type=time输入框改造（推荐，保留原生校验能力） #

步骤1：隐藏原生默认控件（CSS） #

先通过CSS清除浏览器自带的时钟图标和默认spinner样式：

/* 隐藏Chrome/Safari的时钟选择器入口 */
input[type="time"]::-webkit-calendar-picker-indicator {
  display: none;
}
/* 隐藏Webkit内核默认的上下箭头 */
input[type="time"]::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}
/* 兼容Firefox */
input[type="time"] {
  appearance: textfield;
  position: relative;
}

步骤2：自定义增减箭头DOM结构 #

用容器包裹输入框和自定义箭头：

<div class="time-input-wrapper" style="display: flex;align-items: center;gap: 4px;">
  <input type="time" id="customTime" name="customTime" lang="en-US" />
  <div class="time-spinner" style="display: flex;flex-direction: column;gap: 2px;">
    <button class="spin-btn" id="spinUp" aria-label="增加时间" style="padding: 2px 4px;font-size: 12px;">▲</button>
    <button class="spin-btn" id="spinDown" aria-label="减少时间" style="padding: 2px 4px;font-size: 12px;">▼</button>
  </div>
</div>

注：给input添加lang="en-US"属性即可强制显示00:00 AM/PM的12小时制格式。

步骤3：绑定增减逻辑（JS） #

核心逻辑支持点击箭头、键盘上下键调节时间：

const timeInput = document.getElementById('customTime');
const spinUp = document.getElementById('spinUp');
const spinDown = document.getElementById('spinDown');
// 可自定义调整步长，默认1分钟
const ADJUST_STEP = 1;

function adjustTime(step) {
  // 原生time输入框的value为24小时制字符串，例："13:30"
  const [hours, minutes] = (timeInput.value || '00:00').split(':').map(Number);
  let totalMinutes = hours * 60 + minutes + step;
  // 处理一天时间边界
  totalMinutes = (totalMinutes + 1440) % 1440;
  const newHours = String(Math.floor(totalMinutes / 60)).padStart(2, '0');
  const newMinutes = String(totalMinutes % 60).padStart(2, '0');
  timeInput.value = `${newHours}:${newMinutes}`;
}

// 点击箭头调整
spinUp.addEventListener('click', () => adjustTime(ADJUST_STEP));
spinDown.addEventListener('click', () => adjustTime(-ADJUST_STEP));
// 键盘上下键调整
timeInput.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowUp') adjustTime(ADJUST_STEP);
  if (e.key === 'ArrowDown') adjustTime(-ADJUST_STEP);
});

方案2：纯自定义模拟（兼容性最优，无浏览器差异） #

如果需要完全规避不同浏览器对type=time的默认行为差异，可以拆分组件实现：

• 小时输入框：type=number，min=1，max=12，输入自动补前导零
• 固定展示冒号分隔符
• 分钟输入框：type=number，min=0，max=59，输入自动补前导零
• AM/PM切换按钮，点击切换状态
• 隐藏域存储拼接后的标准时间格式，用于表单提交

注意事项 #

• 额外添加输入合法性校验，避免用户输入超出范围的非法时间值
• 如果表单提交需要24小时制时间，提前将12小时制的AM/PM格式转换为对应24小时制数值
• 无障碍优化：所有交互控件添加对应的ARIA属性说明，保留键盘操作能力

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