CODEWITHSUNDEEP
javascripthtmlangular
Blackhole
Blackhole

Reputation: 572

Angular setting input type="date" at start at actual date

I have the following code and i want to get the input to start with the the actual date

<div class="form-outline mb-4">
      <label class="form-label" for="enroll"><b>User Enrollement Date</b></label>
      <input type="date" class="form-control" id="date" name="date" required [form-control]="EnrollmentDate"/>
</div>

in component.ts i have the following:

export class AppComponent {
  EnrollementDate = new FormControl(new Date());

How i can start the date input like this: enter image description here instead of this: enter image description here?

Upvotes: 0

Views: 733

Answers (2)

Flo
Flo

Reputation: 1207

I think you want to bind the formControl to a formControl and not to a ngModel

<div class="form-outline mb-4">
      <label class="form-label" for="enroll"><b>User Enrollement Date</b></label>
      <input type="date" class="form-control" id="date" name="date" required [formControl]="EnrollmentDate"/>
</div>

Also the input is always working with string so you have also to do it like that:

EnrollmentDate = new FormControl(new Date().toISOString().substr(0, 10));

Demo: https://stackblitz.com/edit/angular-qdstvv?file=src/app/app.component.ts

Upvotes: 1

saidutt
saidutt

Reputation: 289

let dateValue = 'Jun 15, 2015, 21:43:11 UTC'; // UTC format works best

EnrollementDate = new FormControl(new Date(dateValue));

The above should work, if you want to set it during OnInit lifecycle hook:

ngOnInit() {
    this.EnrollementDate.setValue(dateValue or new Date(dateValue));
}

Upvotes: 0

Related Questions