Search code examples
angularhtmlangular6angular7timepicker

How To Make Input Type TIME 24-hr Format?

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

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

    enter image description here

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

    Example:

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