Date Counter

I am trying to build a Ionic App which needs a date counter, as in everytime the + button is clicked the date increases. As I am new to Ionic I am having a difficult time.

Can you elaborate some more? Dates to me are not things that can “increase”.

Ill try to elaborate. What i want is: When the button is pressed the date shown changes. Eg. 12 AUG 2020, button press --> 13 Aug 2020

Well, assuming you’re not just looking for ion-datetime,


import {Pipe, PipeTransform} from "@angular/core";
import {format, parseISO} from "date-fns";

  name: "aproposDateFormat",
  pure: true,
export class DateFormatPipe implements PipeTransform {
  transform(value: string | Date, fmt: string): string {
    let d: Date = (value instanceof Date) ? value : parseISO(value);
    let rv = format(d, fmt);
    return rv;


import {Component} from "@angular/core";
import {addDays} from "date-fns";

  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.scss"]
export class AppComponent {
  date = new Date();

  oneDayForward(): void { = addDays(, 1);


      <ion-label>{{date | aproposDateFormat:'dd MMM yyyy'}}</ion-label>
      <ion-button slot="end" (click)="oneDayForward()">+1 day</ion-button>
1 Like

Thanks bruv.

I’ll try it out.

Pipetransform doesnt work for me. I am using Javascript React

Sorry then. I can’t stand the way that React mashes up HTML and JavaScript together, so I do Angular.