使用<input type="time">获取小时值返回NaN的解决方法

问题根源 #

你当前代码返回NaN的核心问题是new Date('time')这一行——你传入的是固定字符串'time'，而非输入框的实际时间值，Date无法解析这个无效内容，因此返回NaN。另外要注意：<input type="time">的value本身就是24小时制的HH:mm格式字符串，浏览器会自动把用户输入的12小时制时间（比如03:11 pm）转换为24小时制的15:11，无需手动处理AM/PM转换。

两种可行解决方案 #

方法1：直接分割字符串提取小时（最简单高效） #

利用<input type="time">固定的HH:mm格式，直接按冒号分割字符串取小时部分：

function showTime(){
  let timeInput = document.getElementById('myTime');
  let output = document.getElementById('output');
  
  // 先判断用户是否选择了时间
  if (!timeInput.value) {
    output.innerText = '请选择时间！';
    return;
  }
  
  // 分割HH:mm字符串，提取小时并转为数字
  let hours = parseInt(timeInput.value.split(':')[0], 10);
  
  console.log(hours);
  // 时间段判断
  if (hours < 12) {
    output.innerText = 'Morning';
  } else if (hours < 18) {
    output.innerText = 'Afternoon';
  } else if (hours < 24) {
    output.innerText = 'Evening';
  } else {
    output.innerText = 'Error getting hour!';
  }
}

方法2：通过Date对象获取小时（需补全日期） #

如果想用Date对象处理，需要给输入的时间补一个有效日期前缀，让Date能正确解析：

function showTime(){
  let timeInput = document.getElementById('myTime');
  let output = document.getElementById('output');
  
  if (!timeInput.value) {
    output.innerText = '请选择时间！';
    return;
  }
  
  // 补全日期构造合法的日期时间字符串
  let fullTimeStr = `2000-01-01T${timeInput.value}`;
  let date = new Date(fullTimeStr);
  let hours = date.getHours();
  
  console.log(hours);
  // 三元表达式写法保持原逻辑
  hours < 12 ? output.innerText = 'Morning'
  : hours < 18 ? output.innerText = 'Afternoon'
  : hours < 24 ? output.innerText = 'Evening'
  : output.innerText = 'Error getting hour!';
}

补充说明 #

• 两种方法都增加了输入为空的判断，避免用户未选择时间时触发错误逻辑；
• HTML和CSS部分无需修改，直接替换JavaScript代码即可正常运行。

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