Fix: Prevent picker from closing until range is chosen

sandypockets · Dec 11, 2023 · dd12217 · dd12217
1 parent 39368c2
commit dd12217
Show file tree

Hide file tree

Showing 6 changed files with 4 additions and 14 deletions.
diff --git a/dist/datepicker.bundle.js b/dist/datepicker.bundle.js
diff --git a/dist/datepicker.css b/dist/datepicker.css
diff --git a/example/index.html b/example/index.html
@@ -25,7 +25,7 @@
           blockedDays: [0, 6], // Prevent Saturday and Sunday from being selected
           showDayNames: true,
           textInputEnabled: true, // Show input field, calendar displays on click
-          darkMode: false,
+          darkMode: true,
           language: 'en', // language ISO code, defaults to en -> ignored if usePageLanguage is true
           usePageLanguage: true, // Looks for a lang attribute on the page, and if the language is supported, uses it
           usePageLanguageFallback: 'en', // If usePageLanguage is true, and the page language is not supported, use this language

diff --git a/src/calendarGenerator.js b/src/calendarGenerator.js
@@ -9,7 +9,6 @@ export function generateDayNames(language) {
 export function generateCalendar(currentDate, isDateSelected, isDateInRange, options) {
   const year = currentDate.getFullYear();
   const month = currentDate.getMonth();
-  const currentDay = currentDate.getDate();
 
   const firstDayOfMonth = new Date(year, month, 1);
   const lastDayOfLastMonth = new Date(year, month, 0).getDate();

diff --git a/src/datePicker.js b/src/datePicker.js
@@ -146,11 +146,7 @@ export default function DatePicker(elementId, options) {
     const today = new Date();
     today.setHours(0, 0, 0, 0);
 
-    console.log('TODAY: ', today);
-    console.log('CLICKED DATE: ', clickedDate);
-
     if (!this.options.selectPastDatesEnabled && clickedDate < today) {
-      console.log('CLICK PREVENTED');
       return;
     }
 
@@ -173,7 +169,7 @@ export default function DatePicker(elementId, options) {
         // Keep the calendar open and do not update the input yet
         this.element.querySelector('.datepicker-calendar-container').style.display = 'block';
       } else if (this.selectedStartDate && !this.selectedEndDate) {
-        if (clickedDate > this.selectedStartDate) {
+        if (clickedDate.getTime() > this.selectedStartDate.getTime()) {
           this.selectedEndDate = clickedDate;
           // Update the input only when both dates are selected
           const input = this.element.querySelector('.datepicker-input');

diff --git a/src/eventHandlers.js b/src/eventHandlers.js
@@ -38,11 +38,6 @@ export function attachEventListeners(element, changeMonth, handleDayClick) {
       }
     }
   };
-  document.listener = event => {
-    if (!calendarContainer.contains(event.target) && !element.querySelector('.datepicker-input').contains(event.target)) {
-      calendarContainer.style.display = 'none';
-    }
-  };
 
   prevMonthButton.addEventListener('click', prevMonthButton.listener);
   nextMonthButton.addEventListener('click', nextMonthButton.listener);