imx-select-datepicker 0.0.1 → 0.0.2

package/README.md

@@ -8,17 +8,24 @@ A component for managing date inputs with separate controls for day and month.
 const inputGroup = new InputGroup(startDate, endDate);
 ```
 
+```javascript
+const inputGroupFrom = new InputGroup();
+const inputGroupTo = new InputGroup();
+
+const inputRange = new InputRange(inputGroupFrom, inputGroupTo);
+```
+
 **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.
 
-## Usage as single date picker
+## Usage as single date picker (use InputGroup only)
 
 ```javascript
 const inputGroup = new InputGroup();
 inputDate.appendChild(inputGroup.markup);
 
-inputGroup.update(new Date('2026-01-01'));
+inputGroup.update(new Date('2026-12-01'));
 ```
 
 ## Usage as range date picker
@@ -30,17 +37,29 @@ inputDate.appendChild(inputGroupFrom.markup);
 const inputGroupTo = new InputGroup();
 inputDate.appendChild(inputGroupTo.markup);
 
+const inputRange = new InputRange(inputGroupFrom, inputGroupTo);
+
 inputGroupFrom.update(new Date('2026-01-01'));
 inputGroupTo.update(new Date('2026-12-31'));
 ```
 
 ## Properties
 
-- **`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.
 
 ## Methods
+### `getMarkup()`
+Returns the HTML markup for the input group to append it to the DOM.
+
+### `getMonthSelect()`
+Returns the month select element for registering change listeners.
+
+### `getDaySelect()`
+Returns the day select element for registering change listeners.
+
+### `getValue()`
+Returns the currently selected date as a ISO date string (YYYY-MM-DD).
 
 ### `update(date)`
 Updates the input fields with a new date.
@@ -57,7 +76,7 @@ Sets the minimum selectable date for the input fields.
 ## Events
 
 ```javascript
-inputGroupFrom.daySelect.select.addEventListener('change', (event) => {
+inputGroupFrom.getDaySelect().addEventListener('change', (event) => {
     const newDate = new Date(event.target.value);
     console.log('New date:', newDate);
 });

package/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imx-select-datepicker",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A simple keyboard accessible select based datepicker",
   "keywords": [
     "accessibility",

package/src/InputGroup/InputGroup.js

@@ -33,6 +33,18 @@ export class InputGroup {
         return this.daySelect.select.value;
     }
 
+    getMarkup() {
+        return this.markup;
+    }
+
+    getMonthSelect() {
+        return this.monthSelect.select;
+    }
+
+    getDaySelect() {
+        return this.daySelect.select;
+    }
+
     update(jsDateObject) {
         if(dayjs(jsDateObject).isValid()) {
             this.updateMonth(jsDateObject);

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);
+            inputGroupTo.setMinDate(newDate);
+
+            if(dayjs(newDate).isAfter(dayjs(inputGroupTo.getValue()), 'day')) {
+                inputGroupTo.update(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);
+            }
+        });
+    }
+}