CODEWITHSUNDEEP
javascriptionic-frameworkionic4
bala
bala

Reputation: 15

How to display current date and time using ionic

Here I am trying to develop a mobile application using an ionic framework. I want to set the current time and date in my application. But it didn't work. Can anyone help me to solve this problem? Here is my code.

HTML code

<ion-datetime
#dateTime
displayFormat="MMM DD, YYYY HH:mm"
formControlName="myDate"></ion-datetime>

ts. code

export class App{
@ViewChild('dateTime') dateTime;

 form: FormGroup
 myDate: FormControl = new FormControl('', Validators.required)

 constructor(private fb: FormBuilder) {}

 ngOnInit() {
this.form = this.fb.group({
  myDate: this.myDate
});

setTimeout(_ => {
  this.dateTime.setValue(new Date().toISOString());
  });
}
 }

Upvotes: 1

Views: 6928

Answers (3)

Don Benito
Don Benito

Reputation: 55

To display current date try this.

home.ts

export class HomePage {

  public currentDate: string;

  constructor() {
    this.currentDate = (new = Date()).toISOString();
  }
}

home.html

<ion-item>
  <ion-label>Current date is {{currentDate | date: 'dd/MM/yyyy'}}</ion-label>
</ion-item>

Upvotes: 0

bala
bala

Reputation: 15

I have tried another code found from google and it worked perfectly. Here is the code;

HTML

<ion-item>
<ion-datetime min="2021" max={{currentDate}} displayFormat= "DD/MM/YYYY  h:mm A" 
  [(ngModel)]="chosenDate"></ion-datetime>
</ion-item>
<p> Current date is {{currentDate}}</p>
<p> Chosen date is {{chosenDate}}</p>

ts.code

export class App implements OnInit {
 public currentDate: String;
 public chosenDate: String;
 constructor(public navCtrl: NavController,private platform:Platform) {
   this.currentDate = (new Date()).toISOString();
   this.chosenDate = this.currentDate;
  });
 }
}

Upvotes: 0

Jaime Lovera
Jaime Lovera

Reputation: 116

have you tried to use [value] property instead of ViewChild? Try to do this:

<ion-content>
  <ion-datetime [value]="dateTime" displayFormat="MMM DD, YYYY HH:mm" ></ion-datetime>
</ion-content>

and in your ts file:

  dateTime;

  constructor() { }

  ngOnInit() {
    setTimeout(() => {
      this.dateTime = new Date().toISOString();
    });
  }

this worked out for me!

Upvotes: 1

Related Questions