How to open date picker manually

[deepupathak]

Issue

Hi, I am unable to open date picker manually. Please provide solution for this problem. I am sharing code snippet below.

Code

openDatePicker(date, mode, format, index) {
   this.setState({ datePickerDate: date, datePickerMode: mode, datePickerFormat: format });
   DatePicker.onPressDate;
}

and I am calling this method (openDatePicker) on row click.

Environment

1. react-native -v: 0.47.1
2. node -v:6.2.1
3. npm -v:4.2.0
4. target platform: Android
5. operating system: windows 10 64 bit

[bslayerw]

the above solution doesn't work. I'm running into this problem too. I'd like to display the date picker from my custom button. How do you show/hide the date picker on a specific event?

[EyalSi]

use: <DatePicker showIcon={false} hideText={true} ref={(ref)=>this.datePickerRef=ref} ... />

and from your element: onPress={() => this.datePickerRef.onPressDate()

[JoelTrottier]

EyalSi's method worked for me.

[evrimfeyyaz]

Here is how you can open it manually with hooks:

import { useRef } from 'react';

// ...

const datePickerRef = useRef(null);

// ...

<SomeComponent onPress={() => datePickerRef.current.onPressDate()} />

// ...

<DatePicker showIcon={false} hideText={true} ref={datePickerRef} />

[kasim444]

Here is how you can open it manually with hooks:

import { useRef } from 'react';

// ...

const datePickerRef = useRef(null);

// ...

<SomeComponent onPress={() => datePickerRef.current.onPressDate()} />

// ...

<DatePicker showIcon={false} hideText={true} ref={datePickerRef} />

Thanks a lot, clean solution.

[jasuno]

@EyalSi I did exactly that and I get an error saying "this.ref.onPressDate is not a function...

[aliwaqar981]

Here is how you can open it manually with hooks:

import { useRef } from 'react';

// ...

const datePickerRef = useRef(null);

// ...

<SomeComponent onPress={() => datePickerRef.current.onPressDate()} />

// ...

<DatePicker showIcon={false} hideText={true} ref={datePickerRef} />

@EyalSi I'm using typescript. what should be the typing of ref? Any suggestion?

[CryceTruly]

@aliwaqar981, you can import DatePicker and use it as the type as const datePickerRe = useRef<DatePicker>(null)