Closed JayWebz closed 3 years ago
As a workaround, at least we can hide it via css
take the list and remove one. I remove all of them as inputRanges={[]}
Little hacky but it works:
useEffect(() => {
document.getElementsByClassName('rdrInputRange')[1].remove();
}, []);
Something like this should work:
import {
addDays,
endOfDay,
startOfDay,
isSameDay,
} from 'date-fns';
import { useState } from 'react';
const [state, setState] = useState({
selection: {
startDate: new Date(),
endDate: null,
key: 'selection'
},
compare: {
startDate: new Date(),
endDate: addDays(new Date(), 3),
key: 'compare'
}
});
<DateRangePicker
onChange={item => setState({ ...state, ...item })}
months={1}
minDate={addDays(new Date(), -30)}
maxDate={addDays(new Date(), 30)}
editableDateInputs={true}
direction="vertical"
staticRanges={[]}
inputRanges={[
{
label: 'days up to today',
range(value) {
return {
startDate: addDays(startOfDay(new Date()), (Math.max(Number(value), 1) - 1) * -1),
endDate: endOfDay(new Date()),
};
},
getCurrentValue(range) {
if (!isSameDay(range.endDate, endOfDay(new Date()))) return '-';
if (!range.startDate) return '∞';
return differenceInCalendarDays(endOfDay(new Date()), range.startDate) + 1;
},
isSelected(range) {
const definedRange = this.range();
return (
isSameDay(range.startDate, definedRange.startDate) &&
isSameDay(range.endDate, definedRange.endDate)
);
},
},
]}
scroll={{ enabled: true }}
ranges={[state.selection, state.compare]}
/>;
Subject of the issue
Much like this issue, https://github.com/hypeserver/react-date-range/issues/404, I'd like to know if there is a way through the inputRanges property on the
<DateRangePicker/>
component to hide the "Days starting today" row, but keep the "Days up to today" row.