Populate input datetime-local in Angular

Question

I need to put a default value in my input datetime-local but for some reason it is not populated in angular. Please tell me what I need to do to make this right. My code is below

<!--Completion Date-->
<div class="form-group">
    <input
      formControlName="completionDate"
      type="datetime-local"
      id="completionDate"
      placeholder="yyyy-MM-ddTHH:mm:ss"
      [min]="date"
      class="form-control"
      required
    />
</div>

populateDate(): string {
    this.dateObj = new Date();
    this.month = this.dateObj.getUTCMonth() + 1;
    this.day = this.dateObj.getUTCDate();
    this.year = this.dateObj.getUTCFullYear();

    return `${this.year}-${this.month}-${this.day}`;
}

createTroubleTicketForm() {
    this.troublTicketForm = this.fb.group({
      ttNum: [null, Validators.required],
      status: [null, Validators.required],
      completionDate: [null],
      incident: [null, Validators.required],
      rootCause: [null, Validators.required],
      resolution: [null],
      category: [null, Validators.required],
      plazaCode: [null, Validators.required],
      laneNum: [null, Validators.required],
      reportedBy: [null],
      helpDeskAgent: [null, Validators.required],
      assignedToTier: [null],
      ticketCreated: [this.populateDate(), Validators.required],
      remarks: [null]
    });
}

Akber Iqbal · Accepted Answer · 2019-09-10 04:28:12Z

4

You'd need to convert date into ISO format before it could be assigned via [ngModel];

relevant TS:

  completeDate: Date;
  localCompleteDate: string;
  constructor() {
    this.completeDate = new Date();
    this.localCompleteDate = this.completeDate.toISOString();
    this.localCompleteDate = this.localCompleteDate.substring(0, this.localCompleteDate.length - 1);
  }

relevant HTML:

<input
  type="datetime-local"
  id="completionDate"
  [ngModel] = "localCompleteDate"
  placeholder="yyyy-MM-ddTHH:mm:ss"
  [min]="date"
  class="form-control"
  required
/>
<br/>
Date: {{completeDate | date:'short'}}
<br/>
ISO Date: {{ localCompleteDate }}

check complete working stackblitz here

answered Sep 10, 2019 at 4:28

Akber Iqbal

15.1k12 gold badges54 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Akber Iqbal Over a year ago

can you share the angular version? did you remove the last 'Z' character from the converted ISO date?

Ibanez1408 Over a year ago

I am using angular 8. I copy pasted your code. where is that last 'Z' character?

Akber Iqbal Over a year ago

this.localCompleteDate = this.localCompleteDate.substring(0, this.localCompleteDate.length - 1); has a substring function where I am removing the last character... If you remove this line, you would see the date in ISO format with character Z as the last character of that date in ISO format

Ibanez1408 Over a year ago

I see.. I really can't figure out why it works on your code and not mine...

Akber Iqbal Over a year ago

on the HTML output... do you see any difference between my SB and your program?

|

Collectives™ on Stack Overflow

Populate input datetime-local in Angular

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related