package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "datenel-react",
-  "version": "0.1.0",
+  "version": "0.0.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "datenel-react",
-      "version": "0.1.0",
+      "version": "0.0.2",
       "devDependencies": {
         "@eslint/js": "^9.19.0",
         "@types/node": "^22.13.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "datenel-react",
-  "version": "0.1.0",
+  "version": "0.0.3",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -40,15 +40,5 @@
   "types": "dist/index.d.ts",
   "files": [
     "dist"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Astrian/datenel-react"
-  },
-  "additionalRepositories": [
-    {
-      "type": "git",
-      "url": "https://git.nas.astrian.moe/Astrian/datenel-react"
-    }
   ]
 }

playground/app.tsx

@@ -6,15 +6,7 @@ export default () => {
 
 	return (<div className='app'>
 		<div className="border">
-			<SingleDatePicker availableRange={[{
+			<SingleWeekPicker value={new Date(2025, 0, 1)} onSelect={(date) => console.log(date)} />
-				year: 2025,
-				month: 1,
-				day: 15
-			}, {
-				year: 2025,
-				month: 11,
-				day: 15
-			}]} />
 		</div>
 	</div>)
 }

src/components/SingleDatePicker.tsx

@@ -70,24 +70,6 @@ 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)]
 }
 
 /**
@@ -98,7 +80,7 @@ export interface SingleDatePickerProps {
  * 
  * @param {SingleDatePickerProps} props
  */
-const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, localization, onClose, mainColor = '#000000', accentColor = '#000000', reversedColor = '#ffffff', hoverColor = '#00000017', borderColor = '#e0e0e0', availableRange: inputAvailableRange }: SingleDatePickerProps) => {
+const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, localization, onClose, mainColor = '#000000', accentColor = '#000000', reversedColor = '#ffffff', hoverColor = '#00000017', borderColor = '#e0e0e0' }: SingleDatePickerProps) => {
 	const [currentMonth, setCurrentMonth] = useState(new Date().getMonth())
 	const [currentYear, setCurrentYear] = useState(new Date().getFullYear())
 	const [selectedDate, setSelectedDate] = useState(new Date())
@@ -106,8 +88,6 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
 	const [l10nDays, setL10nDays] = useState<string[]>([])
 	const [selectMonth, setSelectMonth] = useState(false)
 	const uniqueId = generateUniqueId()
-	const [availableRangeStart, setAvailableRangeStart] = useState<Date | null>(null)
-	const [availableRangeEnd, setAvailableRangeEnd] = useState<Date | null>(null)
 
 	useEffect(() => {
 		setDates(getCalendarDates(currentMonth, currentYear))
@@ -143,46 +123,6 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ 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?.({
@@ -237,30 +177,12 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
 			</div>
 			<div className='body'>
 				<div className='month-selector-body'>
-					{Array.from({ length: 12 }).map((_, index) => {
+					{Array.from({ length: 12 }).map((_, index) => <button className={`item`} key={index} onClick={() => {
-						function calculateNotAvailable() {
+						setCurrentMonth(index)
-							// When the last day of a month not inside the range of available dates
+						setSelectMonth(false)
-							const lastDayOfMonth = new Date(currentYear, index + 1, 0)
+					}} aria-label={`Go to ${new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })} of the year ${currentYear}`}>
-							if (availableRangeStart && lastDayOfMonth < availableRangeStart) return true
+						{new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })}
-							// When the first day of a month not inside the range of available dates
+					</button>)}
-							const firstDayOfMonth = new Date(currentYear, index, 1)
-							if (availableRangeEnd && firstDayOfMonth > availableRangeEnd) return true
-							return false
-						}
-						return <button
-							className={`item ${calculateNotAvailable() && 'not-available'}`}
-							key={index}
-							onClick={() => {
-								setCurrentMonth(index)
-								setSelectMonth(false)
-							}}
-							aria-label={`Go to ${new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })} of the year ${currentYear}`}
-							disabled={calculateNotAvailable()}
-							aria-hidden={calculateNotAvailable()}
-						>
-							{new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })}
-						</button>
-					})}
 				</div>
 			</div>
 			{!!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button>}
@@ -279,21 +201,18 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
 				<div className='calendar-view-body grid' aria-live="polite">
 					{l10nDays.map((day, index) => <div className='item day-indicator' key={index}>{day}</div>)}
 
-					{dates.map(date => {
+					{dates.map(date => <button
-						const notAvailable = (availableRangeStart && date < availableRangeStart) || (availableRangeEnd && date > availableRangeEnd) || currentMonth !== date.getMonth()
+						className={`item date ${currentMonth !== date.getMonth() && 'extra-month'} ${selectedDate.toDateString() === date.toDateString() && 'active'}`}
-						return <button
+						key={date.toISOString()}
-							className={`item date ${notAvailable && 'not-available'} ${selectedDate.toDateString() === date.toDateString() && 'active'}`}
+						onClick={() => selectDate(date)}
-							key={date.toISOString()}
+						aria-label={`${date.toLocaleString(localization || navigator.language, { dateStyle: 'full' })}${date.toDateString() === new Date().toDateString() ? ", this is today" : ""}, click to select this date`}
-							onClick={() => selectDate(date)}
+						tabIndex={currentMonth !== date.getMonth() ? -1 : 0}
-							aria-label={`${date.toLocaleString(localization || navigator.language, { dateStyle: 'full' })}${date.toDateString() === new Date().toDateString() ? ", this is today" : ""}, click to select this date`}
+						aria-hidden={currentMonth !== date.getMonth()}
-							tabIndex={currentMonth !== date.getMonth() ? -1 : 0}
+						disabled={currentMonth !== date.getMonth()}
-							aria-hidden={notAvailable}
+					>
-							disabled={notAvailable}
+						{date.getDate()}
-						>
+						{date.toDateString() === new Date().toDateString() && <svg xmlns="http://www.w3.org/2000/svg" className='today-indicator' viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>}
-							{date.getDate()}
+					</button>)}
-							{date.toDateString() === new Date().toDateString() && <svg xmlns="http://www.w3.org/2000/svg" className='today-indicator' viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>}
-						</button>
-					})}
 				</div>
 			</div>
 			{!!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button>}

src/style.scss

@@ -83,7 +83,7 @@
 				.item.date {
 					border-radius: 50%;
 
-					&.extra-month, &.not-available {
+					&.extra-month {
 						cursor: default;
 					}
 
@@ -112,7 +112,7 @@
 						background: var(--datenel-accent-color);
 						color: var(--datenel-reversed-color);
 
-						.extra-month, .not-available {
+						.extra-month {
 							opacity: 0.5;
 						}
 					}
@@ -129,11 +129,8 @@
 				font-size: 0.75rem;
 				position: relative;
 
-				&.extra-month, &.not-available {
+				&.extra-month {
 					opacity: 0.3;
-					&:hover {
-						background: none;
-					};
 				}
 
 				&.day-indicator {
@@ -159,14 +156,6 @@
 				border-radius: 0.25rem;
 				height: 2rem;
 				padding: 0 0.5rem;
-
-				&.not-available {
-					opacity: 0.3;
-					cursor: default;
-					&:hover {
-						background: none;
-					};
-				}
 			}
 		}