[英]How To Use Two React Native date Picker modal in same component
I want two dates one is start date and other is end date but now the problem is when I change Start Date Automatically end date is also changing and same vice versa.我想要两个日期,一个是开始日期,另一个是结束日期,但现在问题是当我更改开始日期时自动结束日期也在更改,反之亦然。 I am using this = 'react-native-date-picker';
我正在使用这个 = 'react-native-date-picker';
here is my code这是我的代码
import DatePicker from 'react-native-date-picker';
const [date, setDate] = useState(new Date());
const [dateForEndDate, setDateForEndDate] = useState(new Date());
const [open, setOpen] = useState(false);
const [openForEndDate, setOpenForEndDate] = useState(false);
{/* {dealprice === '' || ( */}
<TouchableOpacity onPress={() => setOpen(true)}>
<View
style={{
width: wp('75%'),
flexDirection: 'row',
backgroundColor: '#F2F3F5',
borderRadius: 5,
height: 40,
marginTop: '5%',
}}>
<View
style={{
marginLeft: 15,
justifyContent: 'center',
height: 40,
}}>
<MaterialIcons name="date-range" size={23} color="#E73952" />
</View>
{/* <Button title="Open" onPress={() => setOpen(true)} /> */}
<DatePicker
modal
mode="date"
open={open}
date={date}
onConfirm={(date) => {
setOpen(false);
setDate(date);
}}
onCancel={() => {
setOpen(false);
}}
/>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
marginLeft: '3%',
}}>
<Text>{date.toDateString()}</Text>
</View>
</View>
</TouchableOpacity>
{/* )} */}
{/* {dealprice === '' || ( */}
<TouchableOpacity onPress={() => setOpenForEndDate(true)}>
<View
style={{
width: wp('75%'),
flexDirection: 'row',
backgroundColor: '#F2F3F5',
borderRadius: 5,
height: 40,
marginTop: '5%',
}}>
<View
style={{
marginLeft: 15,
justifyContent: 'center',
height: 40,
}}>
<MaterialIcons name="date-range" size={23} color="#E73952" />
</View>
<DatePicker
modal
mode="date"
open={openForEndDate}
date={dateForEndDate}
onConfirm={(dateForEndDate) => {
setOpenForEndDate(false);
setDateForEndDate(dateForEndDate);
}}
onCancel={() => {
setOpenForEndDate(false);
}}
/>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
marginLeft: '3%',
}}>
<Text>{dateForEndDate.toDateString()}</Text>
</View>
</View>
</TouchableOpacity>
{/* )} */}
ignore it = I want two dates one is start date and other is end date but now the problem is when I change Start Date Automatically end date is also changing and same vice versa.忽略它 = 我想要两个日期,一个是开始日期,另一个是结束日期,但现在问题是当我更改开始日期时自动结束日期也在更改,反之亦然。 I am using this = 'react-native-date-picker';
我正在使用这个 = 'react-native-date-picker'; I want two dates one is start date and other is end date but now the problem is when I change Start Date Automatically end date is also changing and same vice versa.
我想要两个日期,一个是开始日期,另一个是结束日期,但现在问题是当我更改开始日期时自动结束日期也在更改,反之亦然。 I am using this = 'react-native-date-picker';
我正在使用这个 = 'react-native-date-picker';
You will need to have a single Datepicker at the end of the component and you just need to handle that what cause this picker to open ie Start Date or End Date.您将需要在组件的末尾有一个 Datepicker,您只需要处理导致此选择器打开的原因,即开始日期或结束日期。 Here is code example
这是代码示例
import moment from 'moment'
....
const DateFormat = "DD/MM/YYYY";
const [startDate, setStartDate] =
useState(moment().format(DateFormat))
const [endDate, setEndDate] = useState(moment().add(1,
'year').format(DateFormat))
const [dateVisible, setDateVisibleState] = useState(0) // 0-hide , 1-start
//date, 2-end date
const dateVisibleRef = useRef(0)
const setDateVisible = (val) => {
dateVisibleRef.current = val
setDateVisibleState(val)
}
const [calendarDate, setCalendarDate] = useState(new Date())
....
<DateTimePicker
modal
mode="date"
open={dateVisibleRef.current > 0}
date={calendarDate}
onDateChange={setCalendarDate}
onConfirm={(date) => {
let state = dateVisibleRef.current
setDateVisible(0)
if (state == 1)
setStartDate(moment(date).format(DateFormat))
else if (state == 2)
setEndDate(moment(date).format(DateFormat))
}}
onCancel={() => {
setDateVisible(0)
}}
/>
Update the package to version 4.1.1
and your issue will be resolved.将软件包更新到
4.1.1
版,您的问题将得到解决。
More information about your issue is found here .可以在此处找到有关您的问题的更多信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.