I'm a developing a bookings app, so in a section I want to display an ion-dateTime where people can see the valid month days, this implies that the days that have already passed will be shown disabled in the calendar and people can simply select the days enabled Eg: (today, future days...)
but for some reason I can't get it, the ionic 6 dateTime component offers us the isDateEnabled property by which we can customize our validation through a function that will return a boolean value, if the value is true, the enabled dates will be displayed. I managed to do a validation using the isPast() method of the date.fns library, which takes a date and tells me if it is passed, returning a boolean value too.
The problem I have It's just that I don't know why today's date is showing disabled if it's not a past date, does anyone have any idea why?
app.ts
import { Component, OnInit } from '@angular/core';
// libreria de fechas
import { isPast } from 'date-fns';
@Component({
selector: 'app-reservar',
templateUrl: './reservar.page.html',
styleUrls: ['./reservar.page.scss'],
})
export class ReservarPage implements OnInit {
constructor() {
}
ngOnInit() {
}
enabled_days = (dateIsoString:string) => {
const days = (new Date(dateIsoString));
const pastDays = isPast(new Date(days));
if (pastDays) {
return false;
}
return true;
}
}
app.html
<ion-row>
<ion-col size="12">
<ion-item lines="none">
<ion-label>Fecha</ion-label>
<ion-datetime-button slot="end" color="primary" datetime="datetime"></ion-datetime-button>
</ion-item>
<ion-modal [keepContentsMounted]="true">
<ng-template>
<ion-datetime id="datetime"
presentation="date"
firstDayOfWeek="1"
[isDateEnabled]="enabled_days"
>
<span slot="title">Fecha a reservar</span>
</ion-datetime>
</ng-template>
</ion-modal>
</ion-col>
</ion-row>
