DatePicker on Button Press

Question

I am building a react-native application for iOS Devices and I would like to know how it is possible to have one button which onPress will load a DatePicker which will return the selected date?

Thank you.

Answer 1

I have been round the houses with this and worked out that you need to wrap the datepicker in a modal in inline mode within ios. I am using DateTimePicker from '@react-native-community/datetimepicker' rather than react-native-datepicker

I have wrapped the string representation of the date object in a pressable that displays the 'show' property. When you press the pressable you get a modal with the calendar coming up in it, which disappears and sets the date when you click on a date.

I may have bodged a long way round but it seems to work

const [date, setDate] = useState(new Date());
const [show, setShow] = useState(false);

const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    setShow(false);
    setDate(currentDate);
};
return (
<View>
        {show ?
            <Modal

                style={{backgroundColor: 'white', marginTop: 0}}
                animationType="fade"
                transparent={true}
                statusBarTranslucent={true}

            >
                <View style={
                    {
                        ...styles.centeredView,
                        backgroundColor: 'rgba(0, 0, 0, 0.6)',
                        marginTop: 120,
                        marginLeft: 20,
                        marginRight: 20,
                    }}>
                    <DateTimePicker
                        style={{backgroundColor: 'white'}}
                        testID="dateTimePicker"
                        value={date}
                        mode={"date"}
                        display="inline"
                        onChange={onChange}
                     
                    />
                </View>
            </Modal>
            :
            <Pressable onPress={() => setShow(true)}>
                <Text>
                    {date ? date.toLocaleDateString('en-GB') : 'select'}
                </Text>
            </Pressable>
        }
</View>
)

Answer 2

I had the same problem and this was my solution:

NativeBase DatePicker:

 <DatePicker
              defaultDate={new Date(2018, 4, 4)}
              minimumDate={new Date(2018, 1, 1)}
              maximumDate={new Date(2020, 12, 31)}
              locale={"es"}
              timeZoneOffsetInMinutes={undefined}
              modalTransparent={true}
              animationType={"fade"}
              androidMode={"default"}
              placeHolderText="Select date"
              textStyle={{ color: "green" }}
              placeHolderTextStyle={{ color: "#d3d3d3" }}
              onDateChange={this.setDate.bind(this)}
              disabled={false}
              ref={c => this._datePicker = (c) } 
            />

And with this you can open the datePicker:

 <Button onPress={()=>{ this._datePicker.setState({modalVisible:true})}}>
   <Text>
  showDatePicker
  </Text>
</Button>

Answer 3

this is how you can do it, you need to setState on button press simple

import React, { Component } from 'react'
import DatePicker from 'react-native-datepicker'

export default class MyDatePicker extends Component {
  constructor(props){
    super(props)
    this.state = {
     date:"2016-05-15",
     showPickerCheck: false
    },
  }

  render(){
    return (
      <View>
      <Button
       onPress={() => {this.showPicker()}}
       />
      {this.renderDatePicker()}
     </View>
    )
  }

showPicker = () => {
  if(this.state.showPickerCheck)  
     this.setState({showPickerCheck: false   
    })
  }else{
    this.setState({showPickerCheck: true   
    })
  }
}

renderDatePicker = () => {
   if(this.state.showPickerCheck){
     return(
       <DatePicker
        style={{width: 200}}
        date={this.state.date}
        mode="date"
        placeholder="select date"
        format="YYYY-MM-DD"
        minDate="2016-05-01"
        maxDate="2016-06-01"
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        customStyles={{
          dateIcon: {
            position: 'absolute',
            left: 0,
            top: 4,
            marginLeft: 0
          },
          dateInput: {
            marginLeft: 36
          }
          // ... You can check the source to find the other keys.
        }}
        onDateChange={(date) => {this.setState({date: date})}}
      />
     )
   }else return null
  }
}