HTML time输入框无法识别PM时间，默认显示AM问题求助

我在Laravel Blade文件中为time类型的开始时间和结束时间输入框设置值，传入的$s_time为"02:54:13 PM"、$e_time为"03:56:17 PM"，但输入框始终显示为AM格式，无法根据传入的值自动匹配AM/PM，请问问题原因是什么？

相关代码片段 #

PHP变量定义 #

$s_time = "02:54:13 PM";
$e_time = "03:56:17 PM"; 

Laravel Blade视图代码 #

@extends('layouts.admin')
@section('content')
@php
        $s_time = Illuminate\Support\Carbon::parse($attn->start_time)->format('h:i:s A');
        $e_time = Illuminate\Support\Carbon::parse($attn->end_time)->format('h:i:s A');
@endphp
{{--  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>  --}}
{{--  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>  --}}
<!-- Year Picker CSS -->
{{--  <link rel="stylesheet" href="{{asset('css/yearpicker.css')}}" />  --}}

<!-- Year Picker Js -->
{{--  <script src="{{asset('js/yearpicker.js')}}"></script>  --}}
        <section id="basic-datatable">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Attendance</h4>
                        </div>
                        <div class="card-content">
                            <div class="card-body card-dashboard">
                                <div class="row">
                                    <div class="col-md-6 offset-md-3">
                                        <form class="my-5" method="get" action="{{url('admin/update_attendance_return')}}/{{$attn->id}}/{{$attn->user_id}}">
                                            <div class="form-group">
                                                <label for="first-name-icon">Date</label>

                                                <div class="position-relative has-icon-left">
                                                <input class="form-control" name="date" required placeholder="Date" type="text" value={{$attn->date}}>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="first-name-icon">Start Time</label>

                                                <div class="position-relative has-icon-left">
                                                <input class="form-control" name="start_time" placeholder="Start Time" type="time" value={{$s_time}}>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="first-name-icon">End Time</label>

                                                <div class="position-relative has-icon-left">
                                                <input class="form-control" name="end_time" placeholder="End Time" type="time" value={{$e_time}}>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="position-relative has-icon-left">
                                                <input class="form-control" name="user" required placeholder="End Time" type="hidden" value={{$attn->id}}>
                                                </div>
                                            </div>
                                            
                                            <div class="form-group">
                                                <div class="position-relative has-icon-left">
                                                <input class="form-control" name="user_id" required placeholder="End Time" type="hidden" value={{$attn->user_id}}>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="position-relative has-icon-left">
                                                <input class="form-control" name="auth_id" required placeholder="End Time" type="hidden" value={{$auth_id}}>
                                                </div>
                                            </div>

                                            <div class="btn-group pull-right">
                                                <button type="submit" class="btn btn-info pull-right">Submit</button>
                                            </div>
                                        </form>
                                        <br>


                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
@endsection

问题原因 #

核心问题在于HTML的time输入类型仅支持标准的24小时制时间格式（HH:mm:ss），而你传入的是带AM/PM标识的12小时制格式（h:i:s A）。浏览器无法识别这种非标准格式，会将其判定为无效值，最终输入框会显示默认的AM格式或重置为初始状态。

解决方案 #

1. 转换时间为24小时制格式
   修改Blade中Carbon的格式化规则，使用大写H代表24小时制的小时：

   @php
           $s_time = Illuminate\Support\Carbon::parse($attn->start_time)->format('H:i:s');
           $e_time = Illuminate\Support\Carbon::parse($attn->end_time)->format('H:i:s');
   @endphp
   

2. 保留time输入类型
   浏览器会自动根据用户的系统设置，将24小时制的时间值转换为用户偏好的12/24小时显示格式，无需手动处理AM/PM的显示逻辑。

补充说明 #

如果需要在页面上额外展示12小时制的时间文本（比如标签旁的说明），可以单独生成一个12小时制的变量用于静态展示，但输入框的value属性必须使用标准的HH:mm:ss格式。

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