Ionic 6.1: 특정 날짜, 주말 및 공휴일 비활성화

Ionic Framework 6.1은 ion-datetime 내에서 각 날짜의 비활성화 상태를 제어하는 ​​기능을 도입합니다.
isDateEnabled 함수를 사용하여 특정 날짜, 주말, 월, 공휴일 등을 비활성화하는 사용자 지정 규칙을 작성할 수 있습니다.
isDateEnabled는 ISO 8601 날짜 문자열을 허용하고 부울을 반환해야 합니다(활성화의 경우 true, 비활성화의 경우 false).

다음은 애플리케이션에서 실행할 수 있는 몇 가지 일반적인 시나리오입니다.

특정 날짜 비활성화

2022년 1월 1일을 비활성화합니다.

<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;

주말 비활성화

토요일과 일요일을 비활성화합니다.

<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;

공휴일 비활성화

특정 날짜를 비활성화하는 것과 마찬가지로 연도를 비교하지 않고 특정 날짜와 달을 비활성화할 수도 있습니다.

12월 25일을 비활성화합니다.

<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;

이 기능과 6.1.0 릴리스의 다른 기능에서 가치를 찾으시기 바랍니다.