)
}
\ No newline at end of file
diff --git a/src/components/SingleDatePicker.tsx b/src/components/SingleDatePicker.tsx
index 0d24d4e..241cd5c 100644
--- a/src/components/SingleDatePicker.tsx
+++ b/src/components/SingleDatePicker.tsx
@@ -70,6 +70,24 @@ export interface SingleDatePickerProps {
*@default '#e0e0e0'
*/
borderColor?: string
+
+ /**
+ * Limit a range of dates that can be selected. It should be an array of two dates, which the first
+ * one is the available range start date, and the second one is the available range end date.
+ *
+ * If the first one is null, it means that the all dates after the second one is not available. If the second
+ * one is null, it means that the all dates before the first one is not available.
+ *
+ * If the first one is behind the second one, Datenel will exchange them automatically.
+ *
+ * The parameter will be ignored if the array length is not 2.
+ * @example [new Date(2025, 0, 1), new Date(2025, 11, 31)]
+ * @example [new Date(2025, 0, 1), null]
+ * @example [null, new Date(2025, 11, 31)]
+ * @example [new Date(2025, 11, 31), new Date(2025, 0, 1)]
+ * @default undefined
+ */
+ availableRange?: [(Date | { year: number, month: number, day: number } | null), (Date | { year: number, month: number, day: number } | null)]
}
/**
@@ -80,7 +98,7 @@ export interface SingleDatePickerProps {
*
* @param {SingleDatePickerProps} props
*/
-const SingleDatePicker: React.FC = ({ value, onSelect, localization, onClose, mainColor = '#000000', accentColor = '#000000', reversedColor = '#ffffff', hoverColor = '#00000017', borderColor = '#e0e0e0' }: SingleDatePickerProps) => {
+const SingleDatePicker: React.FC = ({ value, onSelect, localization, onClose, mainColor = '#000000', accentColor = '#000000', reversedColor = '#ffffff', hoverColor = '#00000017', borderColor = '#e0e0e0', availableRange: inputAvailableRange }: SingleDatePickerProps) => {
const [currentMonth, setCurrentMonth] = useState(new Date().getMonth())
const [currentYear, setCurrentYear] = useState(new Date().getFullYear())
const [selectedDate, setSelectedDate] = useState(new Date())
@@ -88,6 +106,8 @@ const SingleDatePicker: React.FC = ({ value, onSelect, lo
const [l10nDays, setL10nDays] = useState([])
const [selectMonth, setSelectMonth] = useState(false)
const uniqueId = generateUniqueId()
+ const [availableRangeStart, setAvailableRangeStart] = useState(null)
+ const [availableRangeEnd, setAvailableRangeEnd] = useState(null)
useEffect(() => {
setDates(getCalendarDates(currentMonth, currentYear))
@@ -123,6 +143,46 @@ const SingleDatePicker: React.FC = ({ value, onSelect, lo
})
}, [mainColor, accentColor, reversedColor, hoverColor, borderColor])
+ useEffect(() => {
+ if (!inputAvailableRange) {
+ setAvailableRangeEnd(null)
+ setAvailableRangeStart(null)
+ return
+ }
+ if (inputAvailableRange.length !== 2) {
+ console.warn('Invalid availableRange: The length of the array should be 2. The parameter will be ignored.')
+ setAvailableRangeEnd(null)
+ setAvailableRangeStart(null)
+ return
+ }
+ const [start, end] = inputAvailableRange
+ if (start && end) {
+ const inputStart = !(start instanceof Date) ? new Date(start.year, start.month - 1, start.day) : start
+ const inputEnd = !(end instanceof Date) ? new Date(end.year, end.month - 1, end.day) : end
+ if (inputStart > inputEnd) {
+ setAvailableRangeStart(inputEnd)
+ setAvailableRangeEnd(inputStart)
+ } else {
+ setAvailableRangeStart(inputStart)
+ setAvailableRangeEnd(inputEnd)
+ }
+ }
+ else if (start && !end) {
+ if (!(start instanceof Date)) setAvailableRangeStart(new Date(start.year, start.month - 1, start.day))
+ else setAvailableRangeStart(start)
+ setAvailableRangeEnd(null)
+ }
+ else if (!start && end) {
+ if (!(end instanceof Date)) setAvailableRangeEnd(new Date(end.year, end.month - 1, end.day))
+ else setAvailableRangeEnd(end)
+ setAvailableRangeStart(null)
+ }
+ else {
+ setAvailableRangeStart(null)
+ setAvailableRangeEnd(null)
+ }
+ }, [inputAvailableRange])
+
function selectDate(date: Date) {
setSelectedDate(date)
onSelect?.({
@@ -177,12 +237,30 @@ const SingleDatePicker: React.FC = ({ value, onSelect, lo
- {Array.from({ length: 12 }).map((_, index) => )}
+ {Array.from({ length: 12 }).map((_, index) => {
+ function calculateNotAvailable() {
+ // When the last day of a month not inside the range of available dates
+ const lastDayOfMonth = new Date(currentYear, index + 1, 0)
+ if (availableRangeStart && lastDayOfMonth < availableRangeStart) return true
+ // When the first day of a month not inside the range of available dates
+ const firstDayOfMonth = new Date(currentYear, index, 1)
+ if (availableRangeEnd && firstDayOfMonth > availableRangeEnd) return true
+ return false
+ }
+ return
+ })}