Как найти разницу между двумя датами, используя два разных DateTimePicker в React Native

Я использую два разных DateTimePicker в приложении для реагирования. Ниже приведен код для этого:

Компонент даты:

function useInput() {
  const [date, setDate] = useState(new Date());
  const [mode, setMode] = useState('date');
  const [show, setShow] = useState(false);

  const [date1, setDate1] = useState(new Date());
  const [date2, setDate2] = useState(new Date());

  const showMode = (currentMode) => {
    setShow(true);
    setMode(currentMode);
  };
  const showDatepicker = () => {
    showMode('date');
  };

  const onChange1 = (event, selectedDate) => {
    const currentDate1 = selectedDate || date;
    setShow(Platform.OS === 'ios');
    setDate(currentDate1);
    setDate1(currentDate1);
    console.info("date1: ", date);
  };
  const onChange2 = (event, selectedDate) => {
    const currentDate2 = selectedDate || date;
    setShow(Platform.OS === 'ios');
    setDate(currentDate2);
    setDate2(currentDate2);
    console.info("date1: ", date);
    console.info("date2: ", date2);
    const startDate = moment(date1);
    const timeEnd = moment(date2);
    const diff = timeEnd.diff(startDate);
    const diffDuration = moment.duration(diff);
    console.info("Days:", diffDuration.days());
  };
  return {
    date,
    showDatepicker,
    show,
    mode,
    onChange1,
    onChange2,
  };
}

Главный компонент:

const CreatePost = () => {
const input = useInput(new Date());
const input2 = useInput(new Date());

return (
<View style = {styles.dateContainer}>
    <View style = {styles.startDateContainer}>
        <Text style = {styles.titleInputText}>Starts On</Text>
        <View style = {styles.datePickerContainer}>
            <Text>{input.date.toLocaleDateString()}</Text>
            <View style = {{ marginRight: SizeConfig.blockWidth * 2 }}>
                <TouchableOpacity onPress = {input.showDatepicker}>
                    <Icon
                        name = "calendar-o"
                        type = "font-awesome"
                        color = {COLORS.blackExtraLight}
                        size = {SizeConfig.blockHeight * 3.2}
                    />
                </TouchableOpacity>
                {input.show && (
                    <DateTimePicker
                        testID = "dateTimePicker1"
                        value = {input.date}
                        mode = {input.mode}
                        is24Hour = {true}
                        display = "default"
                        onChange = {input.onChange1}
                    />
                )}
            </View>
        </View>
    </View>
    <View style = {styles.endDateContainer}>
        <Text style = {styles.titleInputText}>Ends On</Text>
        <View style = {styles.datePickerContainer}>
            <Text>{input2.date.toLocaleDateString()}</Text>
            <View style = {{ marginRight: SizeConfig.blockWidth * 2 }}>
                <TouchableOpacity onPress = {input2.showDatepicker}>
                    <Icon
                        name = "calendar-o"
                        type = "font-awesome"
                        color = {COLORS.blackExtraLight}
                        size = {SizeConfig.blockHeight * 3.2}
                    />
                </TouchableOpacity>
                {input2.show && (
                    <DateTimePicker
                        testID = "dateTimePicker2"
                        value = {input2.date}
                        mode = {input2.mode}
                        is24Hour = {true}
                        display = "default"
                        onChange = {input2.onChange2}
                    />
                )}
            </View>
        </View>
    </View>
</View>
)
}

Мои состояния setDate1 (currentDate1) и setDate2 (currentDate2) обновляются при втором щелчке. Например:

выбрано 31 марта в дату начала. Вывод при первом нажатии:

date1: Tue Mar 30 2021 11:37:21 GMT+0530 (India Standard Time)

выбрано 31 марта в дату начала. Вывод при втором щелчке:

date1: Wed Mar 31 2021 11:37:21 GMT+0530 (India Standard Time)

выбрано 10 апреля конечной датой. Вывод при первом нажатии:

date1: Tue Mar 30 2021 11:37:21 GMT+0530 (India Standard Time)

date2: Tue Mar 30 2021 11:37:21 GMT+0530 (India Standard Time)

Days: 0

выбрано 10 апреля конечной датой. Вывод при втором щелчке:

date1: Sat Apr 10 2021 11:37:21 GMT+0530 (India Standard Time)

date2: Sat Apr 10 2021 11:37:21 GMT+0530 (India Standard Time)

Days: 11

На данный момент это дает правильную разницу, но значение date1 также изменяется так же, как date2.

Дата окончания выбрана 30 апреля. Вывод при первом нажатии:

date1: Sat Apr 10 2021 11:37:21 GMT+0530 (India Standard Time)

date2: Sat Apr 10 2021 11:37:21 GMT+0530 (India Standard Time)

Days: 11

Дата окончания выбрана 30 апреля. Вывод при втором щелчке:

date1: Fri Apr 30 2021 11:37:21 GMT+0530 (India Standard Time)

date2: Fri Apr 30 2021 11:37:21 GMT+0530 (India Standard Time)

Days: 0

Я думаю, что есть некоторая проблема с обновлением состояний. Но я не могу понять, что делаю не так. Пожалуйста, помогите мне, я застрял на этой проблеме уже 2 дня.

Пожалуйста, предоставьте дополнительную информацию о результатах (если таковые имеются), которые вы получаете, и о том, что именно ожидается / неверно.

Can Poyrazoğlu 30.03.2021 08:46

@ CanPoyrazoğlu Я обновил вопрос, взгляните на него

pratteek shaurya 30.03.2021 09:19

Сначала вы консолей свою переменную, я вижу, что консольные данные, а не date1, измените ее на console.info ("date1:", date1); console.info ("дата2:", дата2);

Ankit Patel 30.03.2021 09:28

@AnkitPatel Проблема остается той же с упомянутыми вами изменениями.

pratteek shaurya 30.03.2021 09:41
Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
0
4
20
0

Другие вопросы по теме