Date Counter

Ionic Framework
1

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.

2

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

3

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

4

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

date-format.pipe.ts

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

@Pipe({
  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;
  }
}

app.component.ts

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

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

  oneDayForward(): void {
    this.date = addDays(this.date, 1);
  }
}

app.component.html

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

Thanks bruv.

I’ll try it out.

6

Pipetransform doesnt work for me. I am using Javascript React

7

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