Invariant Violation: `value` prop must be an instance of Date object - react-native

Question

I am building a form and this 2 things are behaving bad,
when i press on either of the button and select any date or time, it shoes the above mentioned error from the header as
'Invariant Violation: value prop must be an instance of Date object'
Moreover it also crashes the app builded up on the device emulator
import RNDateTimePicker from '#react-native-community/datetimepicker';
import React,{ useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
export default function App() {
const [datePicker,setDatePicker] = useState(false)
const [datei, setDatei] = useState(new Date())
const [timePicker,setTimePicker] = useState(false)
const [time,setTime] = useState(new Date(Date.now()))
function showDatePicker(){
setDatePicker(true)
}
function showTimePicker(){
setTimePicker(true)
}
function OnDateSelected(datei){
setDatei(datei);
setDatePicker(false)
}
function onTimeSelected(time){
setTime(time);
setTimePicker(false)
}
return (
<View style={styles.container}>
{datePicker && (
<RNDateTimePicker
value={datei}
mode={'date'}
// display={Platform.0S === 'ios' ? 'spinner' : 'default'}
is24Hour={true}
onChange={OnDateSelected}
style={styles.datePicker}
/>
)}
{timePicker && (
<RNDateTimePicker
value={time}
mode={'time'}
// display={Platform.0S === ‘ios' ? 'spinner' : ‘default'}
is24Hour={false}
onChange={onTimeSelected}
style={styles.datePicker}
/>
)}
{!datePicker && (
<View>
<TouchableOpacity
onPress={showDatePicker}
style={[styles.button, styles.buttonOutline]}
>
<Text style={styles.buttonOutlineText}>D A T E</Text>
</TouchableOpacity>
</View>
)}
{!timePicker && (
<View>
<TouchableOpacity
onPress={showTimePicker}
style={[styles.button, styles.buttonOutline]}
>
<Text style={styles.buttonOutlineText}>T I M E</Text>
</TouchableOpacity>
</View>
)}

Answer 1

Basically
function OnDateSelected(event,datei){
console.log(datei,"date")
setDatei(datei);
setDatePicker(false)
}
function onTimeSelected(event,time){
console.log(time,"time")
setTime(time);
setTimePicker(false)
}
The above functions had problem ,since first param was event and you were setting event as value, you need to set Date or time.
Its working now .
Check this example
https://snack.expo.dev/#gaurav1995/fascinated-donut
import RNDateTimePicker from '#react-native-community/datetimepicker';
import React,{ useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
export default function App() {
const [datePicker,setDatePicker] = useState(false)
const [datei, setDatei] = useState(new Date())
const [timePicker,setTimePicker] = useState(false)
const [time,setTime] = useState(new Date(Date.now()))
function showDatePicker(){
setDatePicker(true)
}
function showTimePicker(){
setTimePicker(true)
}
function OnDateSelected(event,datei){
console.log(datei,"date")
setDatei(datei);
setDatePicker(false)
}
function onTimeSelected(event,time){
console.log(time,"time")
setTime(time);
setTimePicker(false)
}
return (
<View style={styles.container}>
{datePicker && (
<RNDateTimePicker
value={datei}
mode={'date'}
// display={Platform.0S === 'ios' ? 'spinner' : 'default'}
is24Hour={true}
onChange={OnDateSelected}
style={styles.datePicker}
/>
)}
{timePicker && (
<RNDateTimePicker
value={time}
mode={'time'}
// display={Platform.0S === ‘ios' ? 'spinner' : ‘default'}
is24Hour={false}
onChange={onTimeSelected}
style={styles.datePicker}
/>
)}
{!datePicker && (
<View>
<TouchableOpacity
onPress={showDatePicker}
style={[styles.button, styles.buttonOutline]}
>
<Text style={styles.buttonOutlineText}>D A T E</Text>
</TouchableOpacity>
</View>
)}
{!timePicker && (
<View>
<TouchableOpacity
onPress={showTimePicker}
style={[styles.button, styles.buttonOutline]}
>
<Text style={styles.buttonOutlineText}>T I M E</Text>
</TouchableOpacity>
</View>
)}
</View>
)
}
const styles = StyleSheet.create({
container:{
flex:1,
padding:40
}
})
Hope it helps. Feel free for doubts

Answer 2

#gaurav-roy
This is the following code that is what i am saying about,
and by inputting 1st sept 2022, 12:00 pm
the output shows 2022-09-16T06:06:05.570Z
console.log("Hello Admin")
var currentTime = datei
var currentOffset = currentTime.getTimezoneOffset();
var ISTOffset = 330; // IST
var ISTTime = new Date(currentTime.getTime() + (ISTOffset +
currentOffset)*60000);
var hoursIST = ISTTime.getHours()
var minutesIST = ISTTime.getMinutes()
console.log("datei",datei)
console.log("currentOffset", currentOffset)
console.log("ISTTime", ISTTime)
console.log("hoursIST", hoursIST)
console.log('minutesIST', minutesIST)