How To Make Input Type TIME 24-hr Format?

Question

I have this Angular 7 project using Angular Material. I also used the time type in my input tag (HTML5)

<input type="time">

but I want it to be 24-hr format (not showing the AM/PM options). I've been searching for solutions but none fits for Angular Material projects.

Solution 1

Although the timepicker I'm really looking for is just like the one in HTML5 but without the AM/PM, I used @MoshFeu's suggestion which is the Ngx Material Timepicker

<mat-form-field>
  <input matInput class="timepicker" [ngxTimepicker]="pickerTwo" [format]=24 placeholder="End" [(ngModel)]="data.formData.end">
</mat-form-field>


<ngx-material-timepicker 
    #picker
    [enableKeyboardInput]=true>
</ngx-material-timepicker>

Popup Timepicker: Time can be editable with a static colon in between (not just selecting numbers in the clock). Also has a validation for 24-hr format and can press up or down keys for increment and decrement.

For the CSS, you can change colors by using :host /deep/ in the classes

Example:

:host /deep/ .timepicker__header {
    background-color: #FF7043 !important;
}

Solution 2

<input matInput type="time-24" [(ngModel)]="timemodel.start"> 

This solved the problem for me. This made it possible to enter time in 24-hour format on both Chrome and FireFox.