minimumDate prop working incorrect

Đang mở
  • Có gì không ổn?
#966 10 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
35/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
javascript, react-native
Lĩnh vực
mobile

Hướng nghiên cứu

The report gives a reproduction using @react-native-community/datetimepicker with minimumDate on the second picker, but names no repository files or tests. Start by reading how minimumDate is handled for each platform and look for existing date picker tests. Done means the second picker fires onChange consistently and preserves the expected date when the minimum changes; the thread has had no comment for 479 days.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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]);

Image

  1. 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().
    Image

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,
  },
});
Ngôn ngữ chính
JavaScript
Star
2.9k
Fork
459
Merge trung bình
4 ngày 16 giờ
Pull request đã merge (30 ngày)
5

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của react-native-datetimepicker/datetimepicker

Tất cả issue của react-native-datetimepicker/datetimepicker

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.