Programmatically open/close react-native-datetimepicker?

Question

Is there a way to programmatically open/close the date picker from react-native-datetimepicker?

My use case is creating a component based on TouchableOpacity that opens the DatePicker when pressed (with a much bigger surface area than the tiny date picker).

RNDateTimePicker does not seem to accept a ref, nor to have an API to hide/show.

Thank you very much.

Answer 1

There is a demo in the document page.Control the show state to hide or show the datepicker.

import React, {useState} from 'react';
import {View, Button, Platform} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

export const App = () => {
  const [date, setDate] = useState(new Date(1598051730000));
  const [mode, setMode] = useState('date');
  const [show, setShow] = useState(false);

  const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    setShow(Platform.OS === 'ios');
    setDate(currentDate);
  };

  const showMode = (currentMode) => {
    setShow(true);
    setMode(currentMode);
  };

  const showDatepicker = () => {
    showMode('date');
  };

  const showTimepicker = () => {
    showMode('time');
  };

  return (
    <View>
      <View>
        <Button onPress={showDatepicker} title="Show date picker!" />
      </View>
      <View>
        <Button onPress={showTimepicker} title="Show time picker!" />
      </View>
      {show && (
        <DateTimePicker
          testID="dateTimePicker"
          value={date}
          mode={mode}
          is24Hour={true}
          display="default"
          onChange={onChange}
        />
      )}
    </View>
  );
};

Answer 2

Here comes the magic of state .Try doing this,

import React, { useState } from 'react';
import { TouchableOpacity, Text } from 'react-native';
import DateTimePicker from 'react-native-datetimepicker';

const CustomDateTimePicker = () => {
  const [showPicker, setShowPicker] = useState(false);
  const [selectedDate, setSelectedDate] = useState(new Date());

  const handlePickerOpen = () => {
    setShowPicker(true);
  };

  const handlePickerClose = () => {
    setShowPicker(false);
  };

  const handleDateChange = (event, date) => {
    if (date !== undefined) {
      setSelectedDate(date);
      // Do something with the selected date
    }
    setShowPicker(false);
  };

  return (
    <>
      <TouchableOpacity onPress={handlePickerOpen}>
        <Text>Open Date Picker</Text>
      </TouchableOpacity>

      {showPicker && (
        <DateTimePicker
          value={selectedDate}
          mode="date"
          onChange={handleDateChange}
        />
      )}
    </>
  );
};

export default CustomDateTimePicker;

By using the state variables , We can make the state to true or false as we desired.

Answer 3

Using the example given on the react-native-datetimepicker page I was able to get it to work for my needs using a little trick here;

useEffect(() => {
  if (show) return;
  setShow(true);
}, [show])