HTML time input always set AM as Default

Viewed 26

This is my Blade File I am setting start and end time value of time input field but it always set the value in AM but my value is in PM format.

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

but it always set the value in AM

why this is happening

AM PM not setting up automatically according to the value pass

enter image description here

@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
1 Answers

Your time format is incorrect.

From the mdn docs:

The value of the time input is always in 24-hour format that includes leading zeros: hh:mm, regardless of the input format

You're not passing 24-hour formatted time, you're passing 12-hour formatted time.

Change your variables to 24-hour time and the input will work as you expect.

Related