安卓端DateTimePickerModal如何通过minimumDate禁止选择当前时间之前的小时

问题原因 #

安卓底层的时间选择器对minimumDate的精度兼容度远低于iOS，若你传入的minimumDate为字符串格式，安卓仅会识别到日期层级，不会限制当日的小时、分钟选择，iOS则可以自动解析字符串到时间精度，所以会出现两端表现不一致的问题。

解决步骤 #

• 第一步：替换getTodayStringSuperior()方法，确保返回值为原生Date对象，不要返回日期字符串、时间戳字符串
  正确的最小时间生成示例：

  const getValidMinimumDate = () => {
    const currentTime = new Date();
    // 如果需要限制到整小时，可开启下面这行将分钟、秒、毫秒归零
    // currentTime.setMinutes(0, 0, 0);
    return currentTime;
  }
  

• 第二步：给安卓端加双重校验兜底，部分定制安卓系统的原生时间选择器存在底层bug，即使传入正确的Date类型最小时间，仍可滑动到过去时间，可在onConfirm回调中额外加判断拦截非法选择：

  import { Platform } from 'react-native';
  
  const handlePickerConfirm = (selectedDate) => {
    const now = new Date();
    // 安卓端拦截小于当前时间的选择
    if (Platform.OS === 'android' && selectedDate.getTime() < now.getTime()) {
      // 可根据业务需求选择弹提示，或者直接默认选中当前时间
      selectedDate = new Date(now);
    }
    // 后续业务逻辑
    setPickedDate(selectedDate);
    setShowDatePicker(false);
  }
  

• 第三步：修改组件调用配置，替换原有的最小时间配置，新增确认回调

  <DateTimePickerModal
    style={{
      width: 'auto',
      marginBottom: 16,
      backgroundColor: '#F0F3F4',
    }}
    isVisible={showDatePicker}
    mode="datetime"
    minimumDate={getValidMinimumDate()}
    onConfirm={handlePickerConfirm}
    onCancel={() => setShowDatePicker(false)}
  />
  

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