update UI and fixed date selection

Author: refinedguides

index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Custom Datepicker</title>
     <link rel="stylesheet" href="style.css" />
-    <script type="module" src="script.js"></script>
+    <script defer src="script.js"></script>
     <!-- social links for refinedguides.com -->
     <script
       src="https://refinedguides.com/assets/social.js?linkColor=%23fff&textColor=%32000"
@@ -36,7 +36,7 @@
               <option>November</option>
               <option>December</option>
             </select>
-            <input type="number" class="year-input" />
+            <input type="number" class="year-input" min="1900" max="2100" />
           </div>
 
           <button class="next">Next</button>

script.js

@@ -22,6 +22,14 @@ cancelBtn.addEventListener("click", () => {
   datepicker.hidden = true;
 });
 
+// close datepicker on outside click
+document.addEventListener("click", (e) => {
+  const datepickerContainer = datepicker.parentNode;
+  if (!datepickerContainer.contains(e.target)) {
+    datepicker.hidden = true;
+  }
+});
+
 // handle apply button click event
 applyBtn.addEventListener("click", () => {
   // set the selected date to date input
@@ -57,7 +65,9 @@ monthInput.addEventListener("change", () => {
 
 // handle year input change event
 yearInput.addEventListener("change", () => {
-  year = yearInput.value;
+  const newYear = parseInt(yearInput.value, 10) || new Date().getFullYear();
+  year = Math.min(2100, Math.max(1900, newYear));
+  yearInput.value = year;
   displayDates();
 });
 
@@ -94,17 +104,20 @@ const displayDates = () => {
   const lastOfPrevMonth = new Date(year, month, 0);
 
   for (let i = 0; i <= lastOfPrevMonth.getDay(); i++) {
+    // if the last day is Saturday don't show the leading dates
+    if (lastOfPrevMonth.getDay() === 6) break;
+
     const text = lastOfPrevMonth.getDate() - lastOfPrevMonth.getDay() + i;
-    const button = createButton(text, true, -1);
+    const button = createButton(text, true);
     dates.appendChild(button);
   }
 
   //* display the current month
 
   // get the last date of the month
-  const lastOfMOnth = new Date(year, month + 1, 0);
+  const lastOfMonth = new Date(year, month + 1, 0);
 
-  for (let i = 1; i <= lastOfMOnth.getDate(); i++) {
+  for (let i = 1; i <= lastOfMonth.getDate(); i++) {
     const button = createButton(i, false);
     button.addEventListener("click", handleDateClick);
     dates.appendChild(button);
@@ -115,33 +128,27 @@ const displayDates = () => {
   const firstOfNextMonth = new Date(year, month + 1, 1);
 
   for (let i = firstOfNextMonth.getDay(); i < 7; i++) {
-    const text = firstOfNextMonth.getDate() - firstOfNextMonth.getDay() + i;
+    // if the first day starts on Sunday don't show the trailing dates
+    if (firstOfNextMonth.getDay() === 0) break;
 
-    const button = createButton(text, true, 1);
+    const text = firstOfNextMonth.getDate() - firstOfNextMonth.getDay() + i;
+    const button = createButton(text, true);
     dates.appendChild(button);
   }
 };
 
-const createButton = (text, isDisabled = false, type = 0) => {
-  const currentDate = new Date();
-
-  // determine the date to compare based on the button type
-  let comparisonDate = new Date(year, month + type, text);
-
-  // check if the current button is the date today
-  const isToday =
-    currentDate.getDate() === text &&
-    currentDate.getFullYear() === year &&
-    currentDate.getMonth() === month;
-
-  // check if the current button is selected
-  const selected = selectedDate.getTime() === comparisonDate.getTime();
-
+const createButton = (text, isDisabled = false) => {
   const button = document.createElement("button");
   button.textContent = text;
   button.disabled = isDisabled;
-  button.classList.toggle("today", isToday && !isDisabled);
-  button.classList.toggle("selected", selected);
+  if (!isDisabled) {
+    const buttonDate = new Date(year, month, text).toDateString();
+    const today = buttonDate === new Date().toDateString();
+    const selected = buttonDate === selectedDate.toDateString();
+
+    button.classList.toggle("today", today);
+    button.classList.toggle("selected", selected);
+  }
   return button;
 };
 

style.css

@@ -23,6 +23,7 @@ body {
   font-size: 1rem;
   border-radius: 5px;
   border: 1px solid #eee;
+  outline-color: mediumpurple;
 }
 
 /* datepicker styles */
@@ -49,7 +50,6 @@ body {
   font-size: 14px;
   font-weight: 500;
   text-transform: uppercase;
-  transition: 0.3s;
   touch-action: manipulation;
 }
 
@@ -105,6 +105,7 @@ body {
 .datepicker-header input {
   font-size: 14px;
   border: 1px solid #eee;
+  outline-color: mediumpurple;
 }
 
 .datepicker-header input {