[英]How to display the calendar using modal datetime picker
I am using the react-native-modal-datetime-picker library and I am trying to use the display prop to display the calendar.我正在使用react-native-modal-datetime-picker库,我正在尝试使用 display 道具来显示日历。 If you look at my reproducible example found on snack expo here , you can see the issue I am having.
如果您在此处查看我在零食 expo上找到的可重现示例,您可以看到我遇到的问题。 I have also posted the code below.
我还在下面发布了代码。
The issue I am having is that when you hit 'Show Data Picker', you can see it renders this bottom modal with the current date.我遇到的问题是,当您点击“显示数据选择器”时,您可以看到它使用当前日期呈现了这个底部模态。 If you press the date, the calendar renders.
如果您按下日期,日历就会呈现。 How can I skip the first bottom modal that gets rendered?
如何跳过第一个呈现的底部模态? I just want to go straight to the calendar.
我只想go直挂日历。
import React, { useState } from "react";
import { Button, View } from "react-native";
import DateTimePickerModal from "react-native-modal-datetime-picker";
const Example = () => {
const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
const showDatePicker = () => {
setDatePickerVisibility(true);
};
const hideDatePicker = () => {
setDatePickerVisibility(false);
};
const handleConfirm = (date) => {
console.warn("A date has been picked: ", date);
hideDatePicker();
};
return (
<View style={{justifyContent: 'center', alignItems: 'center', flex: 1, backgroundColor: 'pink'}}>
<Button title="Show Date Picker" onPress={showDatePicker} />
<DateTimePickerModal
isVisible={isDatePickerVisible}
mode="date"
onConfirm={handleConfirm}
onCancel={hideDatePicker}
display={"default"}
/>
</View>
);
};
export default Example;
The calendar I want, but without the bottom modal that renders, I want just the calendar.我想要的日历,但没有呈现的底部模式,我只想要日历。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.