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,
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
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.