Feat: Optionally prevent past dates from being selected

example/index.html

@@ -20,12 +20,12 @@
         }
 
         const options = {
-          mode: 'single', // 'single' or 'range', defaults to 'single'
+          mode: 'range', // 'single' or 'range', defaults to 'single'
           onSelect: datePickerCallback, // Callback for whenever a date or date range is selected - Required
           blockedDays: [0, 6], // Prevent Saturday and Sunday from being selected
           showDayNames: true,
           textInputEnabled: true, // Show input field, calendar displays on click
-          darkMode: true,
+          darkMode: false,
           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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-dates-picker",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "description": "A super lightweight vanilla JS date picker",
   "main": "dist/datepicker.bundle.js",
   "files": [

src/calendarGenerator.js

@@ -9,6 +9,7 @@ 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();
@@ -63,5 +64,15 @@ export function generateDayCell(year, month, day, isCurrentMonth, isDateSelected
     className += ' in-range';
   }
 
+  const today = new Date();
+  today.setHours(0, 0, 0, 0); // Set to start of today for fair comparison
+
+  if (date.getTime() === today.getTime()) {
+    className += ' today';
+  }
+  if (!options.selectPastDatesEnabled && date < today) {
+    className += ' past-date';
+  }
+
   return `<div tabindex="0" class="${className}" data-day="${day}" data-month="${month}"><span>${dayDisplay}</span></div>`;
 }

src/datePicker.js

@@ -25,6 +25,7 @@ export default function DatePicker(elementId, options) {
       options?.textInputPlaceholder ??
       inputPlaceholderTranslations[options?.usePageLanguage ? getPageLanguage() : options?.language ?? 'en'],
     cornerStyle: options?.cornerStyle ?? 'round',
+    selectPastDatesEnabled: options?.selectPastDatesEnabled ?? false,
   };
   this.init = function () {
     if (this.options.darkMode) this.element.classList.add('dark');
@@ -142,6 +143,17 @@ export default function DatePicker(elementId, options) {
 
     const clickedDate = new Date(year, month, day);
 
+    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;
+    }
+
     if (this.options.mode === 'single') {
       this.selectedStartDate = clickedDate;
       this.selectedEndDate = null;

src/styles/datepicker.css

@@ -39,6 +39,10 @@
   margin: 0 0 5px 5px;
 }
 
+.datepicker-day.past-date {
+  cursor: not-allowed;
+}
+
 .datepicker-day > span {
   display: block;
 }

src/styles/lightmode.css

@@ -8,6 +8,14 @@
 .datepicker-day {
   background-color: #f0f0f0;
 }
+.datepicker-day.past-date,
+.datepicker-day.past-date.blocked {
+  background-color: transparent;
+}
+
+.datepicker-day.today {
+  box-shadow: inset 0 0 0 2px #4caf50;
+}
 
 .datepicker-day:hover {
   background-color: #e0e0e0;