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

Viewed 26

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>
    )}
2 Answers

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

@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)
Related