minimumDate prop working incorrect

[kot-ezhva]

Bug report

I want to select a start date and an end date (for an event). For this purpose I set minimumDate in the second DatePicker.

1. The second DatePicker does not trigger the onChange event, but visually changes the date. This can be fixed by tracking the negative difference between dates and setting the end date programmatically. Code below:

useEffect(() => {
  const diff = dayjs(end).diff(dayjs(start));
  if (diff < 0) {
    setEnd(start)
  }
}, [start, end]);

2. Returning the start date to yesterday's date will change the minimumDate for the end date. And the Second DatePicker starts setting the date as new Date().
   

Example screen full code:

import React, { useEffect, useState } from 'react';
import { StyleSheet, ScrollView } from 'react-native';
import { DateTimePicker, ThemedText, ThemedView } from '@/components';
import RNDateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker';
import { Common } from '@/constants';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import dayjs from 'dayjs';
import { useAppTheme } from '@/hooks/useAppTheme';

export default function ExploreScreen() {
  const [start, setStart] = useState(new Date());
  const [end, setEnd] = useState(new Date());
  
  const { colors } = useAppTheme();
  const { bottom: safeBottomOffset } = useSafeAreaInsets();

  useEffect(() => {
    const diff = dayjs(end).diff(dayjs(start));
    if (diff < 0) {
      setEnd(start)
    }
  }, [start, end]);
  
  return (
    <ScrollView
      contentContainerStyle={[
        styles.scroll,
        { paddingBottom: styles.scroll.padding + safeBottomOffset }
      ]}
      keyboardDismissMode="on-drag"
      keyboardShouldPersistTaps="always"
    >
      <ThemedText>Start: {dayjs(start).toString()}</ThemedText>
      <ThemedText>End:   {dayjs(end).toString()}</ThemedText>

      <ThemedView style={[styles.date, { backgroundColor: colors.border }]}>
        <ThemedText>Start</ThemedText>
        <RNDateTimePicker
          value={start}
          mode="date"
          onChange={(_, date) => date && setStart(date)}
          accentColor={colors.brand}
        />
      </ThemedView>

      <ThemedView style={[styles.date, { backgroundColor: colors.border }]}>
        <ThemedText>End</ThemedText>
        <RNDateTimePicker
          value={end}
          mode="date"
          onChange={(_, date) => {
            if (date) {
              setEnd(date);
            }
          }}
          accentColor={colors.brand}
          minimumDate={start}
        />
      </ThemedView>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  scroll: {
    padding: Common.spaces.md,
    gap: Common.spaces.md,
  },
  date: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    height: 52,
    paddingHorizontal: Common.spaces.md,
    borderRadius: Common.spaces.xs,
  },
});

[marijang]

The same as mine. Which react version u are using? Natiwind?

[kot-ezhva]

Question

I want to select a start date and an end date (for an event). For this purpose I set minimumDate in the second DatePicker.

Video preview how it (not) works

Simulator.Screen.Recording.-.iPhone.15.-.2025-03-11.at.13.28.55.mp4

[kot-ezhva]

The same as mine. Which react version u are using? Natiwind?

Nope.

"expo": "~52.0.35",
"react": "18.3.1",
"react-native": "0.76.7",

[kot-ezhva]

I'm pretty sure this is a @react-native-community/datetimepicker issue, because I found a workaround that works. But it's stupid and wrong

And now, if we repeat the steps from the video, we can see that the date works correctly and the one passed as value is displayed

[kot-ezhva]

And now, if we repeat the steps from the video, we can see that the date works correctly and the one passed as value is displayed

@marijang try this. Works? )