Ionic Framework 6.1 introduces the ability to control the disabled status of each individual day within an ion-datetime.
With the isDateEnabled function, you can write custom rules to disable specific dates, weekends, months, holidays, etc.
isDateEnabled accepts a ISO 8601 date string and must return a boolean (true for enabled, false for disabled).
Here are a few common scenarios you may run into with your applications:
Disabling Specific Dates
Disables January 1, 2022.
<ion-datetime></ion-datetime>
import { getDate, getMonth, getYear } from 'date-fns';
const isDateEnabled = (dateIsoString: string) => {
const date = new Date(dateIsoString);
if (getDate(date) === 1 && getMonth(date) === 0 && getYear(date) === 2022) {
return false;
}
return true;
};
const datetime = document.querySelector('ion-datetime');
datetime.isDateEnabled = isDateEnabled;
Disabling Weekends
Disables Saturday and Sunday.
<ion-datetime></ion-datetime>
import { isWeekend } from 'date-fns';
const isDateEnabled = (dateIsoString: string) => {
const date = new Date(dateIsoString);
return !isWeekend(date);
};
const datetime = document.querySelector('ion-datetime');
datetime.isDateEnabled = isDateEnabled;
Disabling Holidays
Similar to disabling specific dates, you can also disable specific dates and months without comparing the year.
Disables December 25th.
<ion-datetime></ion-datetime>
import { getDate, getMonth, getYear } from 'date-fns';
const isDateEnabled = (dateIsoString: string) => {
const date = new Date(dateIsoString);
if (getDate(date) === 25 && getMonth(date) === 11) {
return false;
}
return true;
};
const datetime = document.querySelector('ion-datetime');
datetime.isDateEnabled = isDateEnabled;
We hope that you find value in this feature and others in the 6.1.0 release.
Top comments (0)