[Fixed] How to pre-fill input type time

Issue

<input type="time" name="title" [(ngModel)]="settingsData.active_from" class="form-control" value="8.45">

I tried to enter the default value in input type time but it does not show anything:
See Output Image

I had tried putting default value by placing 8:45 in the placeholder attribute too but it does not show anything it’s just blank.

Solution

Input Type Time

There appears to be two things wrong with your code currently.

  1. Your input is formatted wrong. It must be a string in the HH:mm format, while you have set a default of H:mm

  2. Your value property will be overwritten by the value you provide in your [(ngModel)] binding, so setting the value property in this instance will do nothing as the value will be overwritten by your ngModel binding.

Example

<input type="time" [(ngModel)]="selectedTime">
@Component()
export class MyExampleComponent {
 selectedTime = "08:45";
}

More Information

MDN on Input Time Formatting (developer.mozilla.org)

Leave a Reply

(*) Required, Your email will not be published