fix: disable year and month on dropdown if enabledDates is activated. (…

…#5)

* feat: add disabledDates prop to allow disabling specific dates

* feat: added enabledDates

* fix: error if disalbedDate on array is null

* fixed lint error

* fix: disabled year and month if enabledDates is used

* chore: add changeset

.changeset/nine-cherries-explain.md

@@ -0,0 +1,5 @@
+---
+'@undp-data/date-picker-svelte': patch
+---
+
+fix: disable year and month on dropdown if enabledDates is activated.

src/lib/DatePicker.svelte

@@ -166,6 +166,22 @@
 		}
 	}
 
+	function isDisabledYear(year: number) {
+		return enabledDates?.length > 0
+			? enabledDates.filter((day) => {
+					return day?.getFullYear() === year
+			  }).length === 0
+			: false
+	}
+
+	function isDisabledMonth(date: Date) {
+		return enabledDates?.length > 0
+			? enabledDates.filter((day) => {
+					return day?.getFullYear() === date.getFullYear() && day?.getMonth() === date.getMonth()
+			  }).length === 0
+			: false
+	}
+
 	function isDisabledDate(calendarDay: CalendarDay) {
 		return disabledDates.find((day) => {
 			return (
@@ -307,7 +323,9 @@
 					{#each iLocale.months as monthName, i}
 						<option
 							disabled={new Date(browseYear, i, getMonthLength(browseYear, i), 23, 59, 59, 999) <
-								min || new Date(browseYear, i) > max}
+								min ||
+								new Date(browseYear, i) > max ||
+								isDisabledMonth(new Date(browseYear, i))}
 							value={i}>{monthName}</option
 						>
 					{/each}
@@ -335,7 +353,7 @@
 					on:keydown={yearKeydown}
 				>
 					{#each years as v}
-						<option value={v}>{v}</option>
+						<option disabled={isDisabledYear(v)} value={v}>{v}</option>
 					{/each}
 				</select>
 				<!-- style <select> button without affecting menu popup -->

src/routes/DatePicker.svelte

@@ -26,6 +26,12 @@
 	const day3 = new Date(day2)
 	day3.setDate(day3.getDate() + 3)
 	enabledDates.push(day3)
+	const day4 = new Date(day2)
+	day4.setMonth(day4.getMonth() - 1)
+	enabledDates.push(day4)
+	const day5 = new Date(day2)
+	day5.setFullYear(day5.getFullYear() - 1)
+	enabledDates.push(day5)
 </script>
 
 <Split>