[Flutter] showDatePicker 특정 날짜 비활성화 하기 (selectableDayPredicate)

solra·2022년 3월 28일
1
post-thumbnail

showDatePicker 특정 날짜 비활성화 하기

작업을 하다 보면 DatePicker에서 특정 날짜는 선택이 불가능하게 만들고 싶을 때가 있어요.
그럴 때 이 코드를 적용하면 됩니다.

showDatePicker 파라미터

Future<DateTime?> showDatePicker({
  required BuildContext context,
  required DateTime initialDate,
  required DateTime firstDate,
  required DateTime lastDate,
  DateTime? currentDate,
  DatePickerEntryMode initialEntryMode = DatePickerEntryMode.calendar,
  SelectableDayPredicate? selectableDayPredicate,
  String? helpText,
  String? cancelText,
  String? confirmText,
  Locale? locale,
  bool useRootNavigator = true,
  RouteSettings? routeSettings,
  TextDirection? textDirection,
  TransitionBuilder? builder,
  DatePickerMode initialDatePickerMode = DatePickerMode.day,
  String? errorFormatText,
  String? errorInvalidText,
  String? fieldHintText,
  String? fieldLabelText,
})

이중 특정 날짜를 비활성화 하는 데 사용할 파라미터는 selectableDayPredicate 입니다.

selectableDayPredicate: (각 항목의 날짜) {
  //true: selectable
  //false: unSelectable
  return booltype;
}

예시

Future<DateTime?> selectedDate = showDatePicker(
  context: Get.context!,
  initialDate: DateTime.now(),
  firstDate: DateTime.now(),
  lastDate: DateTime.utc(2025, 12, 31),
  selectableDayPredicate: (date) {
     //2022년 3월 31일만 비활성화
    if (date == DateTime(2022, 3, 31))
      return false;
    else
      return true;
    }
);

3월 31일이 성공적으로 비활성화 됐습니다.

28일 이전 날짜가 비활성화 되어있는 이유: firstDateDateTime.now() 로 설정되어있어 오늘 날짜부터 선택 가능

profile
현 Flutter 개발자 🥴

6개의 댓글

comment-user-thumbnail
2022년 3월 30일

안녕하세요. showDatePicker의 정보를 알려주셔서 감사합니다. 날짜를 Null값으로 변경하고자 하는데 관련한 방법을 알고 계실까요? 공식문서에는 DateRangePicker에 대한 Null값 세팅밖에 찾을 수 없고 Stackoverflow에서도 관련 내용을 찾기가 어렵네요..

1개의 답글