Ionic DateTime error: Cannot read property 'toISOString' of undefined

Question

I want to display the current date as a default value,is not working if I use the formControlName but I need to use the formControlName.

Here is my HTML file

  <ion-item>
    <ion-label color="primary"> Start date </ion-label>
    <ion-datetime [value]="startDate.toISOString()" formControlName="startDate" required></ion-datetime>
  </ion-item>
  <div id="startDateErrorMessage" *ngIf="newProjForm.controls['startDate'].invalid &(newProjForm.controls['startDate'].dirty || newProjForm.controls['startDate'].touched)">
    <span class="error ion-padding" *ngIf="newProjForm.controls['startDate'].errors.required"> Date is required </span>
  </div>

and here is my TS file

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Component, OnInit } from '@angular/core';
import { AlertController } from '@ionic/angular';
@Component({
selector: 'app-new-project',
templateUrl: './new-project.page.html',
styleUrls: ['./new-project.page.scss'],
})
export class NewProjectPage implements OnInit {
newProjForm: FormGroup;
startDate: Date = new Date();
constructor(private formBuilder: FormBuilder, private alertCtrl: AlertController) { }
ngOnInit() {
this.newProjForm = this.formBuilder.group({
  startDate: ['' ,[Validators.required]]
}); 
}
}

when I compile the project I'm getting this errors

"ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'toISOString' of undefined"

"TypeError: Cannot read property 'toISOString' of undefined"

Can anyone point me in the right direction please?

It means your value is coming as undefined. You can put a truthify check and avoid this error. You can access properties on undefined. startDate.toISOString() startDate seems to be undefined here. — Ankit Garg
– Ankit Garg, Commented Apr 30, 2021 at 4:41
To set the initial value in a form builder object, don't use [value] in the html template. You can replace the '' with the initial value of the field like: startDate: [(new Date()).toISOString(), [Validators.required]] — C. Gäking
– C. Gäking, Commented May 1, 2021 at 7:49
Fine ;-) I'll write it as an answer again so that you can accept it, ok? I would be pleased — C. Gäking
– C. Gäking, Commented May 4, 2021 at 8:53

C. Gäking · Accepted Answer · 2021-05-04 08:55:33Z

2

To set the initial value in a form builder object, don't use [value] in the html template. You can replace the '' with the initial value of the field like:

this.newProjForm = this.formBuilder.group({
  startDate: [(new Date()).toISOString(), [Validators.required]] –
});

answered May 4, 2021 at 8:55

C. Gäking

1631 silver badge11 bronze badges

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

Comments

user391679 · Accepted Answer · 2021-10-22 08:06:24Z

1

Error due to incorrect time display. The answer you're looking for:

// html:

<ion-datetime cancelText="отмена" doneText="Готово" [(ngModel)]="today" displayFormat="D MMM YYYY H:mm"
min="{{min_data}}" max="{{max_data}}" value="2021-11-15T11:00Z" monthShortNames="Январь, Февраль, Март, Апрель, Май, Июнь, Июль, Август, Сентябрь, Октябрь, Ноябрь, Декабрь">
</ion-datetime>

// ts:

today: any
min_data = ''
max_data = ''

pad(s, width, character) {
    return new Array(width - s.toString().length + 1).join(character) + s;
}

ngOnInit() {
    this.today = new Date()
    var numberOfDaysToAdd = 5 // increase by 5 days from today
    this.today.setDate(this.today.getDate() + numberOfDaysToAdd)
    this.min_data = this.today.getFullYear()+'-'+this.pad(this.today.getMonth() + 1, 2, '0')+'-'+this.pad(this.today.getDate(), 2, '0')
    this.max_data = (this.today.getFullYear()+1)+'-'+this.pad(this.today.getMonth() + 1, 2, '0')+'-'+this.pad(this.today.getDate(), 2, '0')
    this.today = this.today.getFullYear()+'-'+this.pad(this.today.getMonth() + 1, 2, '0')+'-'+this.pad(this.today.getDate(), 2, '0') + ' 18:00'
}

answered Oct 22, 2021 at 8:06

user391679

111 bronze badge

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Ionic DateTime error: Cannot read property 'toISOString' of undefined

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related