import
"rsuite/dist/rsuite.min.css"
;
import { DateRangePicker } from
"rsuite"
;
import isAfter from
'date-fns/isAfter'
;
const { allowedMaxDays, allowedDays, allowedRange,
beforeToday, afterToday, combine } = DateRangePicker;
export
default
function
App() {
return
(
<div>
<div style={{ textAlign:
"center"
}}>
<h2>GeeksforGeeks</h2>
<h4 style={{ color:
"green"
}}>
React Suite DateRangePicker Disabled and Readonly
</h4>
</div>
<div style={{ padding: 20, textAlign:
"center"
}}>
<div>
Disabled DateRangePicker:
<DateRangePicker disabled />
<br /> <br />
Custom disabled DateRangePicker:
<DateRangePicker disabledDate={(date) =>
isAfter(date,
new
Date())} />
<br /> <br />
Only Max selection of dates
for
7 days,
others being disabled:
<DateRangePicker disabledDate={allowedMaxDays(7)} />
<br /><br />
Only 7 days allowed, others being disabled:
<DateRangePicker disabledDate={allowedDays(7)} />
<br /> <br />
Only one date range is allowed, others being disabled:
<DateRangePicker
disabledDate={allowedRange(
"2020-10-01"
,
"2021-10-01"
)}
/>
<br /><br />
Disable dates before today
<DateRangePicker disabledDate={beforeToday()} />
<br /><br />
Disable dates after today
<DateRangePicker disabledDate={afterToday()} />
<br /><br />
Allowed max selection
for
7 days,
while
disabling dates
before today, others being disabled
<DateRangePicker
disabledDate={combine(allowedMaxDays(7),
beforeToday())}
/>
</div>
</div>
</div>
);
}