如何使用JavaScript获取两个带am/pm格式的time类型输入框值

首先列出现有代码的问题点：

• HTML中结束时间输入框的id属性值为endtTime，和JS代码中选择器$('#endTime')不匹配，会导致无法正常取值
• JS函数中重复声明start变量，第二个存储结束时间的变量需要更名避免覆盖原有值

你可以写一个单独的时间格式转换函数，把type="time"输入框默认返回的24小时制HH:mm格式字符串，转换为你需要的12小时制带am/pm的格式，完整实现代码如下：

完整JS代码 #

// 24小时制转12小时制带am/pm工具函数
function formatTimeTo12Hour(timeStr) {
  if (!timeStr) return ''
  const [hour, minute] = timeStr.split(':').map(Number)
  const period = hour >= 12 ? 'pm' : 'am'
  const displayHour = hour % 12 || 12
  // 分钟补前导零，保证格式统一
  const displayMinute = minute.toString().padStart(2, '0')
  return `${displayHour}:${displayMinute} ${period}`
}

function calculateTime() {
  const startRaw = $('#startTime').val()
  const endRaw = $('#endtTime').val() // 此处id要和HTML属性保持一致
  
  const formattedStart = formatTimeTo12Hour(startRaw)
  const formattedEnd = formatTimeTo12Hour(endRaw)
  
  // 按你需要的方式输出即可
  alert(`开始时间：${formattedStart}\n结束时间：${formattedEnd}`)
}

对应HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="time" class="form-control" id="startTime" name="startTime" onchange="calculateTime()">
<input type="time" class="form-control" name="endTime" id="endtTime" onchange="calculateTime()">

实现逻辑说明 #

• 首先将输入框拿到的HH:mm格式字符串按冒号拆分，得到小时和分钟的数值
• 用小时值判断时段：大于等于12为pm，小于12为am
• 12小时制的小时换算：对12取余，如果结果为0（也就是0点或者12点）就显示为12，其他情况直接显示取余结果
• 分钟做补前导零处理，避免出现10:5这类不规范的格式

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