DatePicker при нажатии кнопки
Я создаю приложение с поддержкой реакции для устройств iOS, и я хотел бы знать, как можно иметь одну кнопку, которая onPress будет загружать DatePicker, который вернет выбранную дату?
Спасибо.
Но как показать пикер или нажатие кнопки?
Что ты уже испробовал?
Ответы 3
вот как вы можете это сделать, вам нужно установить состояние при нажатии кнопки просто
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
}
}
В дополнение к onDateChange вы также должны включить опору onSelect с тем же методом setstate. Я использовал datepicker без этого, и вы запускаете проблему выбора той же даты без регистрации, что может вызвать проблемы, если вы изначально устанавливаете состояние равным нулю и устанавливаете дату при щелчке или что-то в этом роде. Просто личное наблюдение за крайним случаем. В остальном ответ хороший.
Я не видел кнопку подтверждения, вы можете мне помочь?
У меня была такая же проблема, и мое решение было таким:
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 в модальном во встроенном режиме в ios. Я использую DateTimePicker из @ response-native-community / datetimepicker, а не response-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>
)