Question

我正在为iOS设备构建一个本机应用程序，我想知道怎么可能有一个按钮，它的onPress会加载DatePicker并返回所选日期？

谢谢。

Answer 1

这是您可以使用的方法，您需要在简单按下按钮后设置setState

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

Answer 2

我已经用这个在房子里转了一圈，并发现你需要在 ios 内以内联模式将日期选择器包装在模态中。我正在使用来自“@react-native-community/datetimepicker”的 DateTimePicker 而不是 react-native-datepicker

我已将日期对象的字符串表示形式包装在一个可显示“show”属性的可按下对象中。当您按下可按下按钮时，您会看到一个带有日历的模态框，当您单击某个日期时，它会消失并设置日期。

我可能已经走了很长一段路，但它似乎有效

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 3

我遇到了同样的问题，这是我的解决方案：

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>

按下按钮上的DatePicker

3 个答案: