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.

What about https://agranom.github.io/ngx-material-timepicker/? — Mosh Feu, Mar 04 '19 at 07:09
I will try this but it seems to only have the AM/PM option. Thank you — Char, Mar 04 '19 at 07:11

score 6 · Accepted Answer · answered Mar 04 '19 at 08:50

6

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;
}

answered Mar 04 '19 at 08:50

Char

2,073
8
28
45

1

[The documentation](https://www.npmjs.com/package/ngx-material-timepicker) doesn't show putting the `` inside of a `` but I couldn't get it to work until I did. – Stack Underflow Mar 19 '19 at 23:09
You need the input field to trigger this clock – Char Mar 20 '19 at 02:03
1

Right, I had the input, it was the mat-form-field that I was missing, which isn't shown in the documentation – Stack Underflow Mar 20 '19 at 02:05

score 1 · Answer 2 · edited May 20 '20 at 16:59

1

<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.

edited May 20 '20 at 16:59

Jeremy Caney

7,102
69
48
77

answered May 20 '20 at 16:50

Carsten Pedersen

19
3

I see you’re trying to figure out how to display your markup inline. Use three back ticks (`) on the line before and after your code to display it as a code block. Or indent your markup by four spaces. There are also UI controls to help with this. – Jeremy Caney May 20 '20 at 16:58
12

This doesn't work for me. `type="time"` shows a time picker with AM/PM. But `type="time-24"` does not give me anything and removes the time picker altogether. – Sarun May 27 '21 at 14:41

How To Make Input Type TIME 24-hr Format?

2 Answers2

Linked