Merge pull request #152 from vedansh-5/dateSelect

Improved date selection logic

Author: hpdang

src/popup.html

@@ -74,13 +74,11 @@ <h4>Your Github Username</h4>
 						<p class="text-sm">Fetch your contributions between:</p>
 						<div class="flex justify-between items-center my-2 mx-4">
 							<div class="flex items-center gap-2">
-								<input type="radio" id="lastWeekContribution" name="timeframe" class="form-radio"
-									onclick="toggleRadio(this)">
+								<input type="radio" id="lastWeekContribution" name="timeframe" class="form-radio">
 								<label for="lastWeekContribution">Last 7 days</label>
 							</div>
 							<div class="flex items-center gap-2">
-								<input type="radio" id="yesterdayContribution" name="timeframe" class="form-radio"
-									onclick="toggleRadio(this)">
+								<input type="radio" id="yesterdayContribution" name="timeframe" class="form-radio">
 								<label for="yesterdayContribution">Last 1 day</label>
 							</div>
 						</div>

src/scripts/main.js

@@ -124,19 +124,19 @@ function handleLastWeekContributionChange() {
 	let value = lastWeekContributionElement.checked;
 	let labelElement = document.querySelector("label[for='lastWeekContribution']");
 	if (value) {
-		startingDateElement.disabled = true;
-		endingDateElement.disabled = true;
-		endingDateElement.value = getToday();
-		startingDateElement.value = getLastWeek();
-		handleEndingDateChange();
-		handleStartingDateChange();
-		labelElement.classList.add("selectedLabel");
-		labelElement.classList.remove("unselectedLabel");
+			startingDateElement.readOnly = true;
+			endingDateElement.readOnly = true;
+			endingDateElement.value = getToday();
+			startingDateElement.value = getLastWeek();
+		        handleEndingDateChange();
+		        handleStartingDateChange();
+			labelElement.classList.add("selectedLabel");
+			labelElement.classList.remove("unselectedLabel");
 	} else {
-		startingDateElement.disabled = false;
-		endingDateElement.disabled = false;
-		labelElement.classList.add("unselectedLabel");
-		labelElement.classList.remove("selectedLabel");
+			startingDateElement.readOnly = false;
+			endingDateElement.readOnly = false;
+			labelElement.classList.add("unselectedLabel");
+			labelElement.classList.remove("selectedLabel");
 	}
 
 	chrome.storage.local.set({ lastWeekContribution: value });
@@ -147,17 +147,17 @@ function handleYesterdayContributionChange() {
 	let labelElement = document.querySelector("label[for='yesterdayContribution']");
 
 	if (value) {
-		startingDateElement.disabled = true;
-		endingDateElement.disabled = true;
+		startingDateElement.readOnly = true;
+		endingDateElement.readOnly = true;
 		endingDateElement.value = getToday();
 		startingDateElement.value = getYesterday();
 		handleEndingDateChange();
 		handleStartingDateChange();
 		labelElement.classList.add("selectedLabel");
 		labelElement.classList.remove("unselectedLabel");
 	} else {
-		startingDateElement.disabled = false;
-		endingDateElement.disabled = false;
+		startingDateElement.readOnly = false;
+		endingDateElement.readOnly = false;
 		labelElement.classList.add("unselectedLabel");
 		labelElement.classList.remove("selectedLabel");
 	}

src/scripts/popup.js

@@ -256,8 +256,8 @@ document.addEventListener('DOMContentLoaded', function () {
 
             const startDateInput = document.getElementById('startingDate');
             const endDateInput = document.getElementById('endingDate');
-            startDateInput.disabled = false;
-            endDateInput.disabled = false;
+            startDateInput.readOnly = false;
+            endDateInput.readOnly = false;
 
             chrome.storage.local.set({
                 lastWeekContribution: false,
@@ -294,9 +294,8 @@ document.addEventListener('DOMContentLoaded', function () {
                     startDateInput.value = getYesterday();
                     endDateInput.value = getToday();
                 }
-
-                startDateInput.disabled = endDateInput.disabled = true;
-
+                startDateInput.readOnly = endDateInput.readOnly = true;
+    
                 chrome.storage.local.set({
                     startingDate: startDateInput.value,
                     endingDate: endDateInput.value,
@@ -485,8 +484,8 @@ document.querySelectorAll('input[name="timeframe"]').forEach(radio => {
 
             const startDateInput = document.getElementById('startingDate');
             const endDateInput = document.getElementById('endingDate');
-            startDateInput.disabled = false;
-            endDateInput.disabled = false;
+            startDateInput.readOnly = false;
+            endDateInput.readOnly = false;
 
             chrome.storage.local.set({
                 lastWeekContribution: false,
@@ -558,7 +557,7 @@ function toggleRadio(radio) {
         endDateInput.value = getToday();
     }
 
-    startDateInput.disabled = endDateInput.disabled = true;
+    startDateInput.readOnly = endDateInput.readOnly = true;
 
     chrome.storage.local.set({
         startingDate: startDateInput.value,