imx-select-datepicker 0.0.1 → 0.0.3

package/README.md

@@ -1,64 +1,263 @@
-# imx-select-datepicker - InputGroup
+# imx-select-datepicker
 
-A component for managing date inputs with separate controls for day and month.
+A component for handling date selection via select elements for day, month, and year. The component can be used as a single date picker or as a range date picker.
 
-## Constructor
+## SelectDatepicker
+
+A component for managing date inputs with support for single date and date range modes.
+If no date is explicitly set via `setDate()`, the component defaults to the first day of the first month in the available options range.
+
+### Constructor
 
 ```javascript
-const inputGroup = new InputGroup(startDate, endDate);
+import { SelectDatepicker } from 'imx-select-datepicker';
+
+const selectDatepicker = new SelectDatepicker(config);
 ```
 
 **Parameters:**
-- `startDate` (Date, optional) - The start date for the possible select options. Defaults to the current date minus 1 year.
-- `endDate` (Date, optional) - The end date for the possible select options. Defaults to the current date plus 1 year.
+- `config` (Object) - Configuration object
+  - `mode` (String) - Mode of the component: `'single'` for single date or `'range'` for date range
+  - `availableOptions` (Object, optional)
+    - `start` (Date, optional) - start date for the range of the day/month options - works only in monthly precision (defaults to one year ago)
+    - `end` (Date, optional) - end date for the range of the day/month options - works only in monthly precision (defaults to one year from now)
+  - `onChange` (Function, optional) - Callback function that is called when the date changes
+
+### Usage
+
+#### Single Date Mode
 
-## Usage as single date picker
+```javascript
+const selectDatepicker = new SelectDatepicker({
+    mode: 'single',
+    availableOptions: {
+        start: new Date('2026-01-01'),
+        end: new Date('2026-12-31')
+    },
+    onChange: (dates) => {
+        console.log('Selected date:', dates);
+    }
+});
+
+document.getElementById('datepicker').appendChild(selectDatepicker.getMarkup());
+```
+
+#### Date Range Mode
 
 ```javascript
-const inputGroup = new InputGroup();
-inputDate.appendChild(inputGroup.markup);
+const selectDatepicker = new SelectDatepicker({
+    mode: 'range',
+    availableOptions: {
+        start: new Date('2026-01-01'),
+        end: new Date('2026-12-31')
+    },
+    onChange: (dates) => {
+        console.log('From:', dates[0], 'To:', dates[1]);
+    }
+});
+
+document.getElementById('datepicker').appendChild(selectDatepicker.getMarkup());
+```
+
+### Methods
+
+#### `getMarkup()`
+Returns the DOM element of the component that can be inserted into the document.
+
+**Returns:** DOM Element
+
+#### `setDate(date)`
+Sets the date(s) of the component.
+
+**Parameters:**
+- `date` (Date | Array\<Date\>) - A single date or an array with two dates for the date range
+
+```javascript
+// Single date
+selectDatepicker.setDate(new Date('2026-06-15'));
+
+// Date range
+selectDatepicker.setDate([
+    new Date('2026-06-01'),
+    new Date('2026-06-30')
+]);
+```
+
+#### `setMinDate(date)`
+Sets the minimal selectable (non disabled) date.
+
+**Parameters:**
+- `date` (Date) - A single date.
+
+#### `getDate()`
+Returns the currently selected dates.
+
+**Returns:** Array\<String\> - Array with one or two ISO date strings (YYYY-MM-DD)
+
+```javascript
+const selectedDates = selectDatepicker.getDate();
+console.log(selectedDates); // ['2026-06-01', '2026-06-30'] or ['2026-06-15']
+```
+
+### Events
+
+The component automatically calls the `onChange` callback function when the date selection changes:
+
+```javascript
+const selectDatepicker = new SelectDatepicker({
+    mode: 'range',
+    onChange: (dates) => {
+        console.log('New start date:', dates[0]);
+        console.log('New end date:', dates[1]);
+    }
+});
+```
+
+---
+
+## InputGroup
+
+A component for managing date inputs with separate controls for day, month, and year.
+If no date is explicitly set via `setDate()`, the component defaults to the first day of the month specified by `startDate`.
+
+### Constructor
+
+```javascript
+import { InputGroup } from 'imx-select-datepicker';
+
+const startDate = new Date('2026-01-01');
+const endDate = new Date('2026-12-31');
 
-inputGroup.update(new Date('2026-01-01'));
+const inputGroup = new InputGroup(startDate, endDate);
+
+// or with default options
+const inputGroupWithDefaultOptions = new InputGroup();
 ```
 
-## Usage as range date picker
+**Parameters:**
+- `startDate` (Date, optional) - start date for the range of the day/month options - works only in monthly precision (defaults to one year ago)
+- `endDate` (Date, optional) - end date for the range of the day/month options - works only in monthly precision (defaults to one year from now)
+
+### Usage
 
 ```javascript
-const inputGroupFrom = new InputGroup();
-inputDate.appendChild(inputGroupFrom.markup);
+const startDate = new Date('2026-01-01');
+const endDate = new Date('2026-12-31');
+
+const inputGroupFrom = new InputGroup(startDate, endDate);
+document.getElementById('input-date').appendChild(inputGroupFrom.getMarkup());
 
-const inputGroupTo = new InputGroup();
-inputDate.appendChild(inputGroupTo.markup);
+const inputGroupTo = new InputGroup(startDate, endDate);
+document.getElementById('input-date').appendChild(inputGroupTo.getMarkup());
 
 inputGroupFrom.update(new Date('2026-01-01'));
 inputGroupTo.update(new Date('2026-12-31'));
 ```
 
-## Properties
+### Properties
+
+- **`daySelect.select`** - Select element for day selection
+- **`monthSelect.select`** - Select element for month selection
+- **`yearSelect.select`** - Select element for year selection
+
+### Methods
+
+#### `getMarkup()`
+Returns the HTML markup for the input group to append it to the DOM.
+
+**Returns:** DOM Element
+
+#### `getMonthSelect()`
+Returns the month select element for registering change listeners.
+
+**Returns:** HTMLSelectElement
+
+#### `getDaySelect()`
+Returns the day select element for registering change listeners.
 
-- **`markup`** - The DOM element of the component that can be inserted into the document
-- **`daySelect.select`** - Select element for day selection, to register a change listener.
-- **`monthSelect.select`** - Select element for month selection, to register a change listener.
+**Returns:** HTMLSelectElement
 
-## Methods
+#### `getValue()`
+Returns the currently selected date as a ISO date string (YYYY-MM-DD).
 
-### `update(date)`
+**Returns:** String
+
+#### `update(date)`
 Updates the input fields with a new date.
 
 **Parameters:**
 - `date` (Date) - The new date
 
-### `setMinDate(date)`
+#### `setMinDate(date)`
 Sets the minimum selectable date for the input fields.
 
 **Parameters:**
 - `date` (Date) - The minimum date
 
-## Events
+### Events
 
 ```javascript
-inputGroupFrom.daySelect.select.addEventListener('change', (event) => {
-    const newDate = new Date(event.target.value);
+inputGroupFrom.getDaySelect().addEventListener('change', (event) => {
+    const newDate = new Date(inputGroupFrom.getValue());
     console.log('New date:', newDate);
 });
 ```
+
+---
+
+
+## InputRange
+
+A component that connects two InputGroup instances to create a date range picker. The difference to SelectDatepicker is, that you have to handle the InputGroups individually.
+
+### Constructor
+
+```javascript
+import { InputGroup, InputRange } from 'imx-select-datepicker';
+
+const startDate = new Date('2026-01-01');
+const endDate = new Date('2026-12-31');
+
+const inputGroupFrom = new InputGroup(startDate, endDate);
+const inputGroupTo = new InputGroup(startDate, endDate);
+
+const inputRange = new InputRange(inputGroupFrom, inputGroupTo);
+```
+
+**Parameters:**
+- `inputGroupFrom` (InputGroup) - The InputGroup selecting the from date of the range
+- `inputGroupTo` (InputGroup) - The InputGroup selecting the to date of the range
+
+---
+
+## Usage Examples
+
+### Single Date Picker (using InputGroup only)
+
+```javascript
+const startDate = new Date('2026-01-01');
+const endDate = new Date('2026-12-31');
+
+const inputGroup = new InputGroup(startDate, endDate);
+document.getElementById('datepicker').appendChild(inputGroup.getMarkup());
+
+inputGroup.update(new Date('2026-12-01'));
+```
+
+### Range Date Picker
+
+```javascript
+const startDate = new Date('2026-01-01');
+const endDate = new Date('2026-12-31');
+
+const inputGroupFrom = new InputGroup(startDate, endDate);
+document.getElementById('datepicker-from').appendChild(inputGroupFrom.getMarkup());
+
+const inputGroupTo = new InputGroup(startDate, endDate);
+document.getElementById('datepicker-to').appendChild(inputGroupTo.getMarkup());
+
+const inputRange = new InputRange(inputGroupFrom, inputGroupTo);
+
+inputGroupFrom.update(new Date('2026-01-01'));
+inputGroupTo.update(new Date('2026-12-31'));
+```

package/index.js

@@ -1 +1,3 @@
-export { InputGroup } from "./src/InputGroup/InputGroup.js";
+export { InputGroup } from "./src/InputGroup/InputGroup.js";
+export { InputRange } from "./src/InputRange/InputRange.js";
+export { SelectDatepicker } from "./src/SelectDatepicker/SelectDatepicker.js";

package/jest.config.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+    testEnvironment: "jsdom",
+    transform: {}
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imx-select-datepicker",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "A simple keyboard accessible select based datepicker",
   "keywords": [
     "accessibility",
@@ -15,9 +15,13 @@
   "type": "module",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
   },
   "dependencies": {
     "dayjs": "^1.11.19"
+  },
+  "devDependencies": {
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0"
   }
 }

package/src/InputGroup/InputGroup.js

@@ -33,11 +33,37 @@ export class InputGroup {
         return this.daySelect.select.value;
     }
 
+    getMarkup() {
+        return this.markup;
+    }
+
+    getMonthSelect() {
+        return this.monthSelect.select;
+    }
+
+    getDaySelect() {
+        return this.daySelect.select;
+    }
+
+    isAvailable(jsDateObject) {
+        const dayJsDate = dayjs(jsDateObject);
+
+        const optionGroup = this.optionGroups.find((optionGroup) => {
+            return dayjs(optionGroup.index).isSame(dayJsDate, 'month');
+        });
+
+        return !!optionGroup;
+    }
+
     update(jsDateObject) {
         if(dayjs(jsDateObject).isValid()) {
-            this.updateMonth(jsDateObject);
-            this.updateDayOptions(jsDateObject);
-            this.updateDay(jsDateObject);
+            if(this.isAvailable(jsDateObject)) {
+                this.updateMonth(jsDateObject);
+                this.updateDayOptions(jsDateObject);
+                this.updateDay(jsDateObject);
+            } else {
+                console.warn('Date is not available in the options:', jsDateObject);
+            }
         } else {
             console.warn('Update with invalid date:', jsDateObject);
         }

package/src/InputGroup/InputGroup.test.js

@@ -0,0 +1,30 @@
+import { InputGroup } from './InputGroup.js';
+import { jest } from '@jest/globals'
+
+describe('InputGroup', () => {
+    let inputGroup;
+
+    beforeEach(() => {
+        jest.spyOn(console, 'warn').mockImplementation(() => {});
+        inputGroup = new InputGroup(new Date('2026-01-01'), new Date('2026-12-31'));
+        inputGroup.update(new Date('2026-03-15'));
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    test('sets date March 15th 2026', () => {
+        expect(inputGroup.getValue()).toEqual('2026-03-15');
+    });
+
+    test('sets date before the available options', () => {
+        inputGroup.update(new Date('2025-11-03'));
+        expect(inputGroup.getValue()).toEqual('2026-03-15');
+    });
+
+    test('sets date after the available options', () => {
+        inputGroup.update(new Date('2027-02-17'));
+        expect(inputGroup.getValue()).toEqual('2026-03-15');
+    });
+});

package/src/InputGroup/utils/DaySelect.js

@@ -57,6 +57,7 @@ export class DaySelect {
         if(dayOptions.length > 0) {
             this._select.innerHTML = dayOptions.map((day) => day.outerHTML).join('');
             this._evalMinDate();
+
         } else {
             console.warn('No options found for:', dayJsDate);
         }

package/src/InputGroup/utils/MonthSelect.js

@@ -39,4 +39,15 @@ export class MonthSelect {
             });
         }
     }
+
+    setMaxDate(jsDateObject) {
+        if(!jsDateObject) {
+            this.enableOptions();
+        } else {
+            const dayJsDate = dayjs(jsDateObject);
+            this.getOptions().forEach((option) => {
+                option.disabled = dayJsDate.isBefore(dayjs(option.value), 'month');
+            });
+        }
+    }
 }

package/src/InputGroup/utils/Option.js

@@ -1,11 +1,11 @@
 export class Option {
     static createMonthOption(date) {
-        const formatted = date.format('MMMM YYYY');
+        const formatted = date.toDate().toLocaleDateString('de-DE', { month: 'long', year: 'numeric' });
         return this.createOption(date.format('YYYY-MM-DD'), formatted);
     }
 
     static createDayOption(date) {
-        const formatted = date.format('ddd D');
+        const formatted = date.toDate().toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit' })
         return this.createOption(date.format('YYYY-MM-DD'), formatted);
     }
 

package/src/InputRange/InputRange.js

@@ -0,0 +1,40 @@
+import dayjs from 'dayjs';
+
+export class InputRange {
+
+    constructor(inputGroupFrom, inputGroupTo) {
+        this.inputGroupFrom = inputGroupFrom;
+        this.inputGroupTo = inputGroupTo;
+
+        this.registerSync();
+    }
+
+    registerSync() {
+        const { inputGroupFrom, inputGroupTo } = this;
+
+        inputGroupFrom.getDaySelect().addEventListener('change', (event) => {
+            const newDate = new Date(event.target.value);
+
+            if(dayjs(newDate).isAfter(dayjs(inputGroupTo.getValue()), 'day')) {
+                inputGroupTo.update(newDate);
+                inputGroupTo.setMinDate(newDate);
+                inputGroupTo.getDaySelect().dispatchEvent(new Event('change'));
+            }
+        });
+
+        inputGroupFrom.getMonthSelect().addEventListener('change', (event) => {
+            const newDate = new Date(event.target.value);
+            inputGroupTo.setMinDate(newDate);
+        });
+
+        inputGroupTo.getMonthSelect().addEventListener('change', (event) => {
+            const newDate = new Date(event.target.value);
+
+            if(dayjs(newDate).isSame(dayjs(inputGroupFrom.getValue()), 'month')) {
+                const fromDate = new Date(inputGroupFrom.getValue());
+                inputGroupTo.update(fromDate);
+                inputGroupTo.setMinDate(fromDate);
+            }
+        });
+    }
+}

package/src/SelectDatepicker/SelectDatepicker.js

@@ -0,0 +1,128 @@
+import dayjs from 'dayjs';
+import { InputGroup } from '../InputGroup/InputGroup.js';
+import { InputRange } from '../InputRange/InputRange.js';
+
+export class SelectDatepicker {
+
+    constructor(config) {
+        this.config = config;
+        this._init();
+        this.registerEventListeners();
+    }
+
+    _init() {
+        this.config.mode === 'range' ? this._initRange() : this._initSingle();
+    }
+
+    _initRange() {
+        const { start, end} = this._readAvailableOptions();
+
+        this.inputGroupFrom = new InputGroup(start, end);
+        this.inputGroupTo = new InputGroup(start, end);
+
+        new InputRange(this.inputGroupFrom, this.inputGroupTo);
+    }
+
+    _initSingle() {
+        this.inputGroupFrom = new InputGroup(this.config.availableOptions.start, this.config.availableOptions.end);
+    }
+
+    _readAvailableOptions() {
+        const defaultStart = dayjs().subtract(1, 'y').toDate();
+        const defaultEnd = dayjs().add(1, 'y').toDate();
+
+        const start = this.config.availableOptions?.start ?? defaultStart;
+        const end = this.config.availableOptions?.end ?? defaultEnd;
+
+        return {
+            start: start,
+            end: end
+        }
+    }
+
+    setMinDate(date) {
+        if(this.inputGroupFrom) {
+            this.inputGroupFrom.setMinDate(date);
+        }
+
+        if(this.inputGroupTo) {
+            this.inputGroupTo.setMinDate(date);
+        }
+    }
+
+    setDate(date) {
+        if(date instanceof Array) {
+            if(date[0]) {
+                this.inputGroupFrom.update(this._convertDate(date[0]));
+            }
+
+            if(date[1]) {
+                this.inputGroupTo.update(this._convertDate(date[1]));
+            }
+        } else {
+            this.inputGroupFrom.update(this._convertDate(date));
+        }
+    }
+
+    getDate() {
+        const value = [];
+
+        if(this.inputGroupFrom) {
+            value.push(this.inputGroupFrom.getValue());
+        }
+
+        if(this.inputGroupTo) {
+            value.push(this.inputGroupTo.getValue());
+        }
+
+        return value;
+    }
+
+    _convertDate(date) {
+        return dayjs(date).toDate();
+    }
+
+    getMarkup() {
+        const markup = document.createElement('div');
+        markup.className = 'imx-select-datepicker';
+
+        if(this.inputGroupFrom) {
+            markup.appendChild(this.inputGroupFrom.getMarkup());
+        }
+
+        if(this.inputGroupTo) {
+            markup.appendChild(this.inputGroupTo.getMarkup());
+        }
+
+        return markup;
+    }
+
+    getSelects() {
+        const selects = [];
+
+        if(this.inputGroupFrom) {
+            selects.push(this.inputGroupFrom.getDaySelect());
+            selects.push(this.inputGroupFrom.getMonthSelect());
+        }
+
+        if(this.inputGroupTo) {
+            selects.push(this.inputGroupTo.getDaySelect());
+            selects.push(this.inputGroupTo.getMonthSelect());
+        }
+
+        return selects;
+    }
+
+    registerEventListeners() {
+        const listenerTargets = this.getSelects();
+
+        listenerTargets.forEach(target => {
+            target.addEventListener('change', () => {
+                const selectedDates = this.getDate();
+                if(this.config.onChange && typeof this.config.onChange === 'function') {
+                    this.config.onChange(selectedDates);
+                }
+            });
+        })
+    }
+}

package/src/SelectDatepicker/SelectDatepicker.test.js

@@ -0,0 +1,160 @@
+import { SelectDatepicker } from './SelectDatepicker.js';
+import dayjs from 'dayjs';
+import { jest } from '@jest/globals'
+
+describe('SelectDatepicker', () => {
+    let datepicker;
+
+    const defaultDateString = '2026-01-01';
+
+    const config = {
+        mode: 'range',
+        availableOptions: {
+            start: new Date('2026-01-01'),
+            end: new Date('2026-12-31')
+        },
+        onChange: jest.fn()
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        jest.spyOn(console, 'warn').mockImplementation(() => {});
+        datepicker = new SelectDatepicker(config);
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    describe('initialization', () => {
+        test('initializes in range mode', () => {
+            expect(datepicker.inputGroupFrom).toBeDefined();
+            expect(datepicker.inputGroupTo).toBeDefined();
+        });
+
+        test('initializes in single mode', () => {
+            const singleConfig = {
+                mode: 'single',
+                availableOptions: {
+                    start: new Date('2026-01-01'),
+                    end: new Date('2026-12-31')
+                }
+            };
+            const singleDatepicker = new SelectDatepicker(singleConfig);
+            expect(singleDatepicker.inputGroupFrom).toBeDefined();
+            expect(singleDatepicker.inputGroupTo).toBeUndefined();
+        });
+    });
+
+    describe('setDate', () => {
+        test('sets single date in range mode', () => {
+            const dateString = '2026-03-15';
+            const date = new Date(dateString);
+            datepicker.setDate(date);
+            expect(datepicker.getDate()).toEqual([dateString, defaultDateString]);
+        });
+
+        test('sets date range with array', () => {
+            const fromDateString = '2026-03-15';
+            const toDateString = '2026-06-20';
+
+            const fromDate = new Date(fromDateString);
+            const toDate = new Date(toDateString);
+
+            datepicker.setDate([fromDate, toDate]);
+            expect(datepicker.getDate()).toEqual([fromDateString, toDateString]);
+        });
+
+        test('handles partial array (only start date)', () => {
+            const fromDateString = '2026-03-15';
+            const fromDate = new Date(fromDateString);
+
+            datepicker.setDate([fromDate]);
+            expect(datepicker.getDate()).toEqual([fromDateString, defaultDateString]);
+        });
+
+        test('sets an invalid date', () => {
+            const fromDateString = 'invalid';
+            const fromDate = new Date(fromDateString);
+
+            datepicker.setDate([fromDate]);
+            expect(datepicker.getDate()).toEqual([defaultDateString, defaultDateString]);
+        });
+    });
+
+    describe('getDate', () => {
+        test('returns array of selected dates', () => {
+            datepicker.setDate([new Date('2026-03-15'), new Date('2026-06-20')]);
+            const dates = datepicker.getDate();
+
+            expect(Array.isArray(dates)).toBe(true);
+            expect(dates.length).toBe(2);
+        });
+
+        test('returns single date in range mode', () => {
+            datepicker.setDate(new Date('2026-03-15'));
+            const dates = datepicker.getDate();
+
+            expect(dates.length).toBeGreaterThan(0);
+        });
+
+        test('returns the default dates if no availableOptions are passed', () => {
+            const emptyDatepicker = new SelectDatepicker({
+                mode: 'range',
+            });
+            const dates = emptyDatepicker.getDate();
+            expect(dates).toEqual([dayjs().subtract(1, 'year').startOf('month').format('YYYY-MM-DD'), dayjs().subtract(1, 'year').startOf('month').format('YYYY-MM-DD')]);
+        });
+    });
+
+    describe('getMarkup', () => {
+        test('returns a div element', () => {
+            const markup = datepicker.getMarkup();
+            expect(markup.tagName).toBe('DIV');
+            expect(markup.className).toBe('imx-select-datepicker');
+        });
+
+        test('includes both input groups in markup', () => {
+            const markup = datepicker.getMarkup();
+            expect(markup.children.length).toBe(2);
+        });
+    });
+
+    describe('getSelects', () => {
+        test('returns array of select elements', () => {
+            const selects = datepicker.getSelects();
+            expect(Array.isArray(selects)).toBe(true);
+            expect(selects.length).toBeGreaterThan(0);
+        });
+
+        test('returns 4 selects in range mode (day, month x2)', () => {
+            const selects = datepicker.getSelects();
+            expect(selects.length).toBe(4);
+        });
+    });
+
+    describe('registerEventListeners', () => {
+        test('calls onChange callback on select change', () => {
+            const selects = datepicker.getSelects();
+            const event = new Event('change');
+
+            selects[0].dispatchEvent(event);
+            expect(config.onChange).toHaveBeenCalled();
+        });
+
+        test('does not call onChange if not provided', () => {
+            const noCbConfig = {
+                mode: 'range',
+                availableOptions: {
+                    start: new Date('2026-01-01'),
+                    end: new Date('2026-12-31')
+                }
+            };
+            const noCbDatepicker = new SelectDatepicker(noCbConfig);
+            const selects = noCbDatepicker.getSelects();
+            const event = new Event('change');
+
+            expect(() => selects[0].dispatchEvent(event)).not.toThrow();
+        });
+    });
+});