react-native-ui-datepicker

react-native-ui-datepicker copied to clipboard

when i upgraded, from 2.0.11 to 3.1.2 i got this error.

Im on SDK 52

logs

 LOG  newDate 1743259080000
 LOG  date 1743427708397
 LOG  initialDate 1743259080000

export default function DateAndTimePickerModal({
  timePicker,
  isVisible,
  onClose,
  initialDate = null,
  onDateChange,
  minDate,
  maxDate,
  initialView = 'day',
  labelConfig
}: DateAndTimePickerProps) {
  const defaultStyles = useDefaultStyles();

  const fallbackDate = dayjs().valueOf();
  const [date,setDate] = useState(initialDate ? initialDate : fallbackDate);
  const [newDate,setNewDate] = useState(initialDate ? initialDate : fallbackDate);
  const [showConfirmation,setShowConfirmation] = useState(false);

  const { mainTitle,currentDateLabels,newDateLabels,setDateButton } = labelConfig;

  // Update the useEffect to handle null initialDate
  useEffect(() => {
    setNewDate(initialDate ? initialDate : fallbackDate);
  },[initialDate]);

  // get user timezone to get locale
  const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

  const handleDateChange = (params: { date: Date | null }) => {

    console.log('params.date',params.date);
    if (params.date) {
      setNewDate(dayjs(params.date).valueOf());
      setShowConfirmation(true);
    }
  };

  const handleConfirm = () => {
    Alert.alert(
      "Confirm Date",
      `Are you sure you want to set the review date to ${dayjs(newDate).format("MMM D, YYYY h:mm A")}?`,
      [
        {
          text: "Cancel",
          style: "cancel"
        },
        {
          text: "Confirm",
          onPress: () => {
            setDate(newDate);
            onDateChange(dayjs(newDate).toDate());
            onClose();
          }
        }
      ]
    );
  };

  console.log('newDate',newDate);
  console.log('date',date);
  console.log('initialDate',initialDate);

  return (
    <Modal
      visible={isVisible}
      presentationStyle="pageSheet"
      animationType="slide"
      onRequestClose={onClose}
    >
      <ScrollView contentContainerStyle={{ flex: 1,backgroundColor: 'white' }}>
        {/* Calendar Section */}
        <View style={{ flex: 1,padding: 20 }}>
          <DateTimePicker
            styles={{
              ...defaultStyles,
            }}
            initialView={initialView}
            timePicker={timePicker}
            mode="single"
            // date={newDate.toDate() ?? date.toDate()}
            date={dayjs(newDate).toDate()}
            locale={timezone}
            onChange={handleDateChange as any}
            containerHeight={400}
            minDate={dayjs(minDate).toDate()}
            maxDate={dayjs(maxDate).toDate()}
          />
        </View>
        {/* Review Details Section */}
        <View style={{
          backgroundColor: 'white',
          padding: 20,
          borderTopWidth: 1,
          borderTopColor: '#e0e0e0',
          marginBottom: 70
        }}>
          <Text style={{
            fontSize: 20,
            fontWeight: 'bold',
            marginBottom: 15
          }}>
            {mainTitle}
          </Text>

          <View style={{ marginBottom: 20 }}>
            <Text style={{
              fontSize: 14,
              color: '#666',
              marginBottom: 5
            }}>
              {currentDateLabels.title}
            </Text>
            <Text style={{
              fontSize: 14,
              fontWeight: '400',
              color: '#999'
            }}>
              {initialDate ? dayjs(date).format('MMMM D, YYYY h:mm A') : 'No date selected'}
            </Text>
            <Text style={{
              fontSize: 16,
              color: theme?.raw?.colors?.main?.red[600],
              marginTop: 15,
              marginBottom: 5
            }}>
              {newDateLabels.title}
            </Text>
            <Text style={{
              fontSize: 18,
              fontWeight: '500',
              color: theme?.raw?.colors?.main?.red[400]
            }}>
              {dayjs(newDate).format('MMMM D, YYYY h:mm A')}
            </Text>
          </View>

          <View style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            marginTop: 10
          }}>
            <TouchableOpacity
              style={{
                padding: 15,
                borderRadius: 8,
                width: '48%',
                alignItems: 'center',
                backgroundColor: '#e0e0e0'
              }}
              onPress={onClose}
            >
              <Text style={{
                fontSize: 16,
                fontWeight: '500',
                color: '#666'
              }}>
                Cancel
              </Text>
            </TouchableOpacity>

            <TouchableOpacity
              style={{
                padding: 15,
                borderRadius: 8,
                width: '48%',
                alignItems: 'center',
                backgroundColor: theme?.raw?.colors?.main?.red[400]
              }}
              onPress={handleConfirm}
            >
              <Text style={{
                fontSize: 16,
                fontWeight: '500',
                color: '#fff'
              }}>
                {setDateButton.title}
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      </ScrollView>
    </Modal>
  );
}