如何将JSON对象的值赋值给Input Type TIME？赋值后不显示的解决办法

time类型的输入框对值的格式有严格要求，必须是HH:mm（24小时制，小时和分钟各两位，比如08:30）或者HH:mm:ss格式，不符合的话赋值后不会在输入框中显示。按以下步骤排查解决：

• 第一步：确认response.Object.Hora的实际格式
  先在控制台打印这个值，明确它的格式：

  console.log(response.Object.Hora);
  

  常见问题格式包括：12小时制（比如8:30 AM）、缺少前导零（比如9:5）、带日期前缀（比如2024-05-20 09:30）。

• 第二步：根据原始格式转换为符合要求的时间字符串
  针对不同的原始格式，用对应代码转换：

  1. 原始格式是H:m（比如9:30）：

     const rawTime = response.Object.Hora;
     const [hours, minutes] = rawTime.split(':');
     // 补前导零，转成HH:mm格式
     const formattedTime = `${hours.padStart(2, '0')}:${minutes.padStart(2, '0')}`;
     $("#inicioEdicao").val(formattedTime);
     

  2. 原始格式是带日期的字符串（比如2024-05-20 14:30:00）：

     const rawDateTime = response.Object.Hora;
     // 提取空格后的时间部分
     const formattedTime = rawDateTime.split(' ')[1];
     $("#inicioEdicao").val(formattedTime);
     

  3. 原始格式是12小时制带AM/PM（比如02:30 PM）：

     const rawTime = response.Object.Hora;
     const [timePart, period] = rawTime.split(' ');
     let [hours, minutes] = timePart.split(':');
     // 转换为24小时制
     if (period === 'PM' && hours !== '12') {
       hours = String(parseInt(hours) + 12);
     }
     if (period === 'AM' && hours === '12') {
       hours = '00';
     }
     const formattedTime = `${hours.padStart(2, '0')}:${minutes.padStart(2, '0')}`;
     $("#inicioEdicao").val(formattedTime);
     

• 第三步：验证赋值是否生效
  赋值后打印输入框的value，确认格式正确：

  $("#inicioEdicao").val(formattedTime);
  console.log($("#inicioEdicao").val()); // 查看是否输出符合要求的格式
  

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