Ionic 6.1: Disabling Specific Dates, Weekends and Holidays

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.