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';
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'; 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';
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 i.e Start Date or End Date. Here is code example