Nativebase: How to launch the native-base date-clicker on pressing another component?

[fotoflo]

I want to force launch a native-base DatePicker when a user presses a button.

How would I do that? Can't find anything in the documentation.

In my example, I render the picker conditionally. If the picker is already set, i just show the button...

import React from 'react';
import { Container, Content, Text, Button, DatePicker, Title } from 'native-base';

class Example extends React.Component {

  constructor(props) {
    super(props);
    const now = new Date()
    this.state = { 
        now, 
        chosenDate: now 
    };
  }

  setDate(newDate) {
    this.setState({ chosenDate: newDate });
  }

    callPicker() {
        // what now?
    }

  render() {
    return (
      <Container>
        <Content>

          { 
            this.state.choseDate == now ?  (
              <Content>
                <DatePicker
                  defaultDate={new Date(2018, 4, 4)}
                  minimumDate={new Date(1960, 1, 1)}
                  maximumDate={new Date(2018, 12, 31)}
                  locale={"en"}
                  timeZoneOffsetInMinutes={undefined}
                  modalTransparent={true}
                  animationType={"fade"}
                  androidMode={"default"}
                  placeHolderText="Select date"
                  textStyle={{ color: "green" }}
                  placeHolderTextStyle={{ color: "#d3d3d3" }}
                  onDateChange={(newDate) => this.setDate(newDate)}
                  disabled={false}
                />
              </Content>
            ) : (
              <Content>
                <Button onPress={callPicker}>
                    <Text>{this.state.choseDate}</Text>
                </Button>
              </Content>
            )
          }
        </Content>
      </Container>
    );
  }
}

[SupriyaKalghatgi]

Your code doesn't work
Working code here

constructor(props) {
    super(props);
    this.state = {
      now: new Date(),
      chosenDate: new Date()
    };
  }

  setDate(newDate) {
    this.setState({ chosenDate: newDate });
  }
  callPicker() {
    // what now?
  }

  render() {
    return (
      <Container>
        <Header />
        <Content padder>
          <Content>
            {
              this.state.chosenDate.getTime() === this.state.now.getTime() ? (
                <DatePicker
                  defaultDate={new Date(2018, 4, 4)}
                  minimumDate={new Date(1960, 1, 1)}
                  maximumDate={new Date(2018, 12, 31)}
                  locale={"en"}
                  timeZoneOffsetInMinutes={undefined}
                  modalTransparent={true}
                  animationType={"fade"}
                  androidMode={"default"}
                  placeHolderText="Select date"
                  textStyle={{ color: "green" }}
                  placeHolderTextStyle={{ color: "#d3d3d3" }}
                  onDateChange={(newDate) => this.setDate(newDate)}
                  disabled={false}
                />
              ) : (
                  <Button onPress={this.callPicker()}>
                    <Text>{this.state.chosenDate.toString().substr(4, 12)}</Text>
                  </Button>
                )
            }
          </Content>
        </Content>
      </Container>
    );
  }

[fotoflo]

hi @SupriyaKalghatgi Thanks for your response. The callPicker method is not implemented... So this code doesn't do anything either, right?

[juhana]

Should this be interpreted so that it's currently impossible to open the date picker programmatically?

[andrewinsoul]

You can do that by using ref. The code will look something like this:

import React, {Component} from 'react';
import {
  Button,
  Container,
  Content,
  DatePicker,
} from 'native-base';

class Example extends Component {
  UNSAFE_componentWillMount() {
    this.inputRefs = [React.createRef()];
  }

  render() {
    return (
      <Container>
        <Content padder>
          <Form>
              <Item
                regular
                }}>
                <DatePicker
                  ref={r => (this.inputRefs[0] = r)}
                  placeHolderText="Date Of Birth
                />
              </Item>
               <Button
                  onPress={() => {
                    this.inputRefs[0].showDatePicker();
                  }}>
                   Open Date Picker
              </Button>
          </Form>
        </Content>
      </Container>
    );
  }
}

[apgsn]

As the previous commenter said, you can open the picker by accessing its ref.
Here's a minimal working example:

import React, {createRef} from 'react';
import {Text, Button, View, DatePicker} from 'native-base';

const PickerButton = () => {
  const picker = createRef();

  return (
    <View>
      <DatePicker ref={picker} />
      <Button onPress={() => picker.current?.showDatePicker()}>
        <Text>Open Picker</Text>
      </Button>
    </View>
  );
};

export default PickerButton;