skip to Main Content

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


  1. Chosen as BEST ANSWER

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

  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search