react-native-community/datetimepicker is not setting all its values - react-native

Question

I am doing a datatimepicker with #react-native-community/datetimepicker but I am facing a problem in which the default value does not change its year and day but It changes its hour.
I did a logic to open the set day and year, and after closing/setting that it opens the set hour, it is weird because when I set the year and day It changes its value in the screen but when I finished changing the hour, they set its value to default
const [date, setDate] = useState(new Date());
const [show, setShow] = useState(false);
const [mode, setMode] = useState('date');
[enter image description here][1]
const initialState = {
guests,
smoking,
date,
show,
mode
};
const changeShowMode = () => {
setShow(true)
setMode('date')
}
const handleReservation = () => {
console.log(JSON.stringify(initialState));
setGuests(1)
setSmoking(false)
setDate(date)
}
<View style={styles.formRow}>
<Text style={styles.formLabel}>Date and Time</Text>
<TouchableOpacity style={styles.formItem}
style={{
padding: 7,
borderColor: '#512DA8',
borderWidth: 2,
flexDirection: 'row'
}}
onPress={() => changeShowMode()}
>
<Icon type='font-awesome' name='calendar' color='#512DA8' />
<Text>
{' ' + Moment(date).format('DD-MMM-YYYY h:mm A') }
</Text>
</TouchableOpacity>
{show && (
<DateTimePicker
value={date}
display='default'
mode={mode}
minimumDate={new Date()}
minuteInterval={30}
onChange={(event, date) => {
if (date === undefined) {
setShow(false)
}
else {
setShow(mode === 'time' ? false : true),
setMode('time'),
setDate(date)
}
}}
/>
)}
</View>
<View style={styles.formRow}>
<Button
title='reserver'
color='#512DA8'
onPress={() => handleReservation()}
accessibilityLabel='Learn more about this purple button'
/>
</View>
You will see how the hour is changing, but the year and day are not.
https://i.stack.imgur.com/2FfuI.jpg

Answer 1

Your logic seems OK but there is something happening under the hood when you update the state. I have been playing with this and set up a snack for you. Here is the link.
Full code here
import * as React from 'react';
import {
Text,
View,
StyleSheet,
Button,
TouchableOpacity,
Alert,
} from 'react-native';
import Constants from 'expo-constants';
import Moment from 'moment';
import DateTimePicker from '#react-native-community/datetimepicker';
export default function App() {
const [dateInfo, updateDateInfo] = React.useState({
date: new Date(),
show: false,
mode: 'date',
});
const changeShowMode = () => {
updateInfo({ show: true, mode: 'date' });
};
const updateInfo = (info) => {
updateDateInfo({ ...dateInfo, ...info });
};
const handleReservation = () => {};
return (
<>
<View style={styles.formRow}>
<Text style={styles.formLabel}>Date and Time</Text>
<TouchableOpacity
style={styles.formItem}
onPress={() => changeShowMode()}>
<Text>
{' ' + Moment(dateInfo.date).format('DD-MMM-YYYY h:mm A')}
</Text>
</TouchableOpacity>
{dateInfo.show && (
<DateTimePicker
value={dateInfo.date}
display="default"
mode={dateInfo.mode}
minimumDate={new Date()}
minuteInterval={30}
onChange={(event, dateTime) => {
if (dateTime === undefined) {
updateInfo({ show: false });
} else if (dateInfo.mode === 'time') {
let timeDate = Moment(dateTime);
updateInfo({
show: false,
mode: 'date',
date: Moment(dateInfo.date)
.set('hour', timeDate.get('hour'))
.set('minute', timeDate.get('minute'))
.set('minute', timeDate.get('second'))
.toDate(),
});
} else {
updateInfo({ mode: 'time', date: dateTime });
}
}}
/>
)}
</View>
<View style={styles.formRow}>
<Button
title="reserver"
color="#512DA8"
onPress={() => handleReservation()}
accessibilityLabel="Learn more about this purple button"
/>
</View>
</>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
Basically instead of updating states multiple time, which were causing an issue, I used an object which updates the date object fine. Please take a look and try if this works fine.
Good Luck