React Native 0.55.2中如何禁用DatePickerIOS/Android特定日期？

嘿，我之前做项目的时候刚好碰到过一模一样的情况！React Native 0.55.2自带的DatePickerAndroid和DatePickerIOS确实没有直接提供禁用特定星期几的配置项，但我们完全可以通过两种方式实现需求：

方案一：基于官方组件的手动校验拦截 #

这个方案不需要额外依赖，核心思路是在用户选择日期后，先判断该日期是否是周二或周五，如果是则拦截选择并给出提示，否则正常更新选中状态。

示例代码（Android端） #

import { DatePickerAndroid, Alert } from 'react-native';

const showDatePicker = async () => {
  try {
    const { action, year, month, day } = await DatePickerAndroid.open({
      date: new Date(),
    });
    if (action !== DatePickerAndroid.dismissedAction) {
      const selectedDate = new Date(year, month, day);
      const dayOfWeek = selectedDate.getDay(); // 0=周日, 1=周一, 2=周二, 5=周五
      if (dayOfWeek === 2 || dayOfWeek === 5) {
        Alert.alert('提示', '周二和周五无法选择，请重新挑选日期');
        return;
      }
      // 这里处理正常选中的日期，比如更新状态
      // setSelectedDate(selectedDate);
    }
  } catch ({ code, message }) {
    console.warn('Cannot open date picker', message);
  }
};

示例代码（iOS端） #

import { DatePickerIOS, Alert } from 'react-native';
import { useState } from 'react';

const DatePickerComponent = () => {
  const [selectedDate, setSelectedDate] = useState(new Date());

  const handleDateChange = (date) => {
    const dayOfWeek = date.getDay();
    if (dayOfWeek === 2 || dayOfWeek === 5) {
      Alert.alert('提示', '周二和周五无法选择，请重新挑选日期');
      // 不更新状态，保持之前的选中值
      return;
    }
    setSelectedDate(date);
  };

  return (
    <DatePickerIOS
      date={selectedDate}
      onDateChange={handleDateChange}
    />
  );
};

方案二：使用第三方日历组件 #

如果觉得手动校验的用户体验不够理想（比如用户看不到哪些日期不能选），可以考虑用第三方日历组件，这类组件通常支持直接配置禁用规则。

比如react-native-calendars这个库（注意要安装适配React Native 0.55.2的旧版本），它可以通过disableDate函数来指定禁用的日期：

import { Calendar } from 'react-native-calendars';

const CustomCalendar = () => {
  const handleDayPress = (day) => {
    // 处理选中日期的逻辑
  };

  return (
    <Calendar
      onDayPress={handleDayPress}
      disableDate={(date) => {
        const dayOfWeek = date.day; // 注意这里的day是星期几，1=周一，2=周二，5=周五（不同库的星期索引可能有差异，需看文档）
        return dayOfWeek === 2 || dayOfWeek === 5;
      }}
      // 可选：配置禁用日期的样式
      disabledDayStyle={{ backgroundColor: '#eee', opacity: 0.5 }}
    />
  );
};

注意事项 #

• 方案一的优势是无额外依赖，但用户需要选择后才知道日期不可用，适合对UI要求不高的场景；
• 方案二的用户体验更好，能直观看到禁用的日期，但需要引入第三方库，且要注意版本兼容性（React Native 0.55.2比较旧，建议找对应版本的第三方库）。

内容的提问来源于stack exchange，提问作者Sasha