|
|
@@ -51,6 +51,8 @@ export default function RangeCalendar({
|
|
|
const [singleDate, setSingleDate] = useState<DateType>(undefined);
|
|
|
const [startDate, setStartDate] = useState<DateType>(undefined);
|
|
|
const [endDate, setEndDate] = useState<DateType>(undefined);
|
|
|
+ const [currentMonth, setCurrentMonth] = useState<number | undefined>(undefined);
|
|
|
+ const [currentYear, setCurrentYear] = useState<number | undefined>(undefined);
|
|
|
|
|
|
const computedMinDate = externalMinDate
|
|
|
? dayjs(externalMinDate)
|
|
|
@@ -67,18 +69,24 @@ export default function RangeCalendar({
|
|
|
useEffect(() => {
|
|
|
if (allowRangeSelection) {
|
|
|
if (initialStartDate) {
|
|
|
+ const startDateObj = dayjs(initialStartDate);
|
|
|
setSelectedStartDate(initialStartDate);
|
|
|
- setStartDate(dayjs(initialStartDate));
|
|
|
+ setStartDate(startDateObj);
|
|
|
+ setCurrentMonth(startDateObj.month());
|
|
|
+ setCurrentYear(startDateObj.year());
|
|
|
}
|
|
|
if (initialEndDate) {
|
|
|
setSelectedEndDate(initialEndDate);
|
|
|
setEndDate(dayjs(initialEndDate));
|
|
|
}
|
|
|
} else if (selectedDate) {
|
|
|
+ const dateObj = dayjs(selectedDate);
|
|
|
setSelectedStartDate(selectedDate);
|
|
|
- setSingleDate(dayjs(selectedDate));
|
|
|
+ setSingleDate(dateObj);
|
|
|
+ setCurrentMonth(dateObj.month());
|
|
|
+ setCurrentYear(dateObj.year());
|
|
|
}
|
|
|
- }, [initialStartDate, initialEndDate, selectedDate, allowRangeSelection]);
|
|
|
+ }, [isModalVisible, initialStartDate, initialEndDate, selectedDate, allowRangeSelection]);
|
|
|
|
|
|
const getDisabledDates = (date: DateType) => {
|
|
|
const dateString = dayjs(date).format('YYYY-MM-DD');
|
|
|
@@ -128,6 +136,10 @@ export default function RangeCalendar({
|
|
|
setStartDate(undefined);
|
|
|
setEndDate(undefined);
|
|
|
setSingleDate(undefined);
|
|
|
+ setTimeout(() => {
|
|
|
+ setCurrentMonth(undefined);
|
|
|
+ setCurrentYear(undefined);
|
|
|
+ }, 200);
|
|
|
};
|
|
|
|
|
|
const handleClose = () => {
|
|
|
@@ -137,6 +149,10 @@ export default function RangeCalendar({
|
|
|
setStartDate(undefined);
|
|
|
setEndDate(undefined);
|
|
|
setSingleDate(undefined);
|
|
|
+ setTimeout(() => {
|
|
|
+ setCurrentMonth(undefined);
|
|
|
+ setCurrentYear(undefined);
|
|
|
+ }, 200);
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
@@ -148,10 +164,13 @@ export default function RangeCalendar({
|
|
|
>
|
|
|
<View style={styles.modalContent}>
|
|
|
<DateTimePicker
|
|
|
+ key={`${currentMonth}-${currentYear}`}
|
|
|
mode={allowRangeSelection ? 'range' : 'single'}
|
|
|
date={singleDate}
|
|
|
startDate={startDate}
|
|
|
endDate={endDate}
|
|
|
+ month={currentMonth}
|
|
|
+ year={currentYear}
|
|
|
onChange={handleDateChange}
|
|
|
minDate={computedMinDate}
|
|
|
maxDate={computedMaxDate}
|