Я использую два разных 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 дня.
@ CanPoyrazoğlu Я обновил вопрос, взгляните на него
Сначала вы консолей свою переменную, я вижу, что консольные данные, а не date1, измените ее на console.info ("date1:", date1); console.info ("дата2:", дата2);
@AnkitPatel Проблема остается той же с упомянутыми вами изменениями.





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