How to implement TIME picker?

[jason6149]

Hi,
Very noob question here, new to RN.
I have a RN page and want to enable the user to select both Date (which works), and Time (which throws an error).

Here is my code:

import DatePicker from 'react-native-date-picker';

     <DatePicker
        textColor={'#FFF'}
        mode="time"
      />

The error I get is this:
Render Error
Invalid or missing Date prop. Must be a Date object.
Check usage of react-native-date-picker.

What am I missing? I thought "Time" was one of the three modes.
Thank you very much,
J

[henninghall]

You still need the date prop (in the terms of Javascript date object)

date={new Date() }

even if mode is time. I understand that it can be unclear.

[TalhaAbid1]

***@jason6149 I Have A Solution Available For You
Try The Given Code:
1st : Import Package

import React, { useState } from 'react';
import DatePicker from 'react-native-date-picker';

*2nd : declear & initialize Variables *

const [date, setDate] = useState(new Date());
const [open, setOpen] = useState(false);

*Finally : Implement Package *

<DatePicker
        modal
        textColor="#F9B510"
        mode="datetime"
        theme="dark"
        open={open}
        date={date}
        onConfirm={date => {
          setOpen(false);
          setDate(date);
          console.log(date);
        }}
        onCancel={() => {
          setOpen(false);
        }}
      />

-Overall Code Would Look Like This-

import React, { useState} from 'react';
import {View, Text, TouchableOpacity,} from 'react-native';
const DateTimePage= () => {
   const [date, setDate] = useState(new Date());
   const [open, setOpen] = useState(false);
   return (
       <View>
      <DatePicker
              modal
              textColor="#F9B510"
              mode="datetime"
              theme="dark"
              open={open}
              date={date}
              onConfirm={date => {
                setOpen(false);
                setDate(date);
                console.log(date);
              }}
              onCancel={() => {
                setOpen(false);
              }}
            />
       <TouchableOpacity onPress={() => { setOpen(true) }}>
              <Text style={{ margin: 5, padding:5 , fontWeight: 'bold', color: '#ffffff' , backgroundColor: '#000000',fontSize:18,}}>
              I AM BUTTON TO SELECT DATE AND TIME
            </Text>
       </TouchableOpacity>
       </View>
   );
}
export default DateTimePage;

-Drop A Like If It Helps you ❤-