Выбор даты при нажатии кнопки

Question

Я создаю собственное приложение для iOS-устройств и хотел бы знать, как можно иметь одну кнопку, которая на OnPress будет загружать DatePicker, который будет возвращать выбранную дату?

Спасибо.

Answer 1

У меня была такая же проблема, и это было мое решение:

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) } 
            />

И с этим вы можете открыть DatePicker:

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

Answer 2

это то, как вы можете это сделать, вам нужно установить состояние на нажатие кнопки просто

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
  }
}