imx-select-datepicker 0.0.1

package/README.md

@@ -0,0 +1,64 @@
+# imx-select-datepicker - InputGroup
+
+A component for managing date inputs with separate controls for day and month.
+
+## Constructor
+
+```javascript
+const inputGroup = new InputGroup(startDate, endDate);
+```
+
+**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
+
+```javascript
+const inputGroup = new InputGroup();
+inputDate.appendChild(inputGroup.markup);
+
+inputGroup.update(new Date('2026-01-01'));
+```
+
+## Usage as range date picker
+
+```javascript
+const inputGroupFrom = new InputGroup();
+inputDate.appendChild(inputGroupFrom.markup);
+
+const inputGroupTo = new InputGroup();
+inputDate.appendChild(inputGroupTo.markup);
+
+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
+
+### `update(date)`
+Updates the input fields with a new date.
+
+**Parameters:**
+- `date` (Date) - The new date
+
+### `setMinDate(date)`
+Sets the minimum selectable date for the input fields.
+
+**Parameters:**
+- `date` (Date) - The minimum date
+
+## Events
+
+```javascript
+inputGroupFrom.daySelect.select.addEventListener('change', (event) => {
+    const newDate = new Date(event.target.value);
+    console.log('New date:', newDate);
+});
+```

package/index.js

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

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "imx-select-datepicker",
+  "version": "0.0.1",
+  "description": "A simple keyboard accessible select based datepicker",
+  "keywords": [
+    "accessibility",
+    "datepicker"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git@gitlab.infomax.dev:haunerdinger/imx-select-datepicker.git"
+  },
+  "license": "ISC",
+  "author": "Markus Haunerdinger",
+  "type": "module",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "dayjs": "^1.11.19"
+  }
+}

package/src/InputGroup/InputGroup.js

@@ -0,0 +1,75 @@
+import dayjs from 'dayjs';
+import { OptionGroup } from './utils/OptionGroup.js';
+import { DaySelect } from './utils/DaySelect.js';
+import { DomHelper } from './utils/DomHelper.js';
+import { DateHelper } from './utils/DateHelper.js';
+import { MonthSelect } from './utils/MonthSelect.js';
+
+export class InputGroup {
+
+    constructor(startDate = dayjs().subtract(1, 'y').toDate(), endDate = dayjs().add(1, 'y').toDate()) {
+        const startOfMonth = dayjs(startDate).startOf('month');
+        const endOfMonth = dayjs(endDate).endOf('month');
+
+        this.optionGroups = OptionGroup.createOptions(
+            DateHelper.range(startOfMonth, endOfMonth, 'month')
+        );
+
+        this.daySelect = new DaySelect();
+        this.monthSelect = new MonthSelect(this.optionGroups);
+
+        this.registerEventListeners(this.monthSelect);
+
+        this.markup = DomHelper.createMarkup(this.monthSelect.select, this.daySelect.select);
+        this.updateDayOptions(startDate);
+    };
+
+    setMinDate(jsDateObject) {
+        this.monthSelect.setMinDate(jsDateObject);
+        this.daySelect.setMinDate(jsDateObject);
+    }
+
+    getValue() {
+        return this.daySelect.select.value;
+    }
+
+    update(jsDateObject) {
+        if(dayjs(jsDateObject).isValid()) {
+            this.updateMonth(jsDateObject);
+            this.updateDayOptions(jsDateObject);
+            this.updateDay(jsDateObject);
+        } else {
+            console.warn('Update with invalid date:', jsDateObject);
+        }
+    }
+
+    updateDay(jsDateObject) {
+        const dayJsDate = dayjs(jsDateObject);
+        this.daySelect.setValue(dayJsDate);
+    }
+
+    updateMonth(jsDateObject) {
+        const dayJsDate = dayjs(jsDateObject);
+
+        const optionGroup = this.optionGroups.find((optionGroup) => {
+            return dayjs(optionGroup.index).isSame(dayJsDate, 'month');
+        });
+
+        if(optionGroup) {
+            this.monthSelect.setValue(optionGroup.index);
+        } else {
+            console.warn('No matching month option found for date:', jsDateObject);
+        }
+    }
+
+    updateDayOptions(jsDateObject) {
+        const dayJsDate = dayjs(jsDateObject)
+        this.daySelect.updateOptions(dayJsDate);
+    }
+
+    registerEventListeners(monthSelect) {
+        monthSelect.select.addEventListener('change', (event) => {
+            this.daySelect.updateOptions(dayjs(event.target.value));
+        });
+    }
+}

package/src/InputGroup/utils/DateHelper.js

@@ -0,0 +1,13 @@
+export class DateHelper {
+    static range(start, end, interval){
+        let date = start;
+        const dateArray = [];
+
+        while(date.isBefore(end, interval) || date.isSame(end, interval)) {
+            dateArray.push(date)
+            date = date.add(1, interval);
+        }
+
+        return dateArray;
+    }
+}

package/src/InputGroup/utils/DaySelect.js

@@ -0,0 +1,64 @@
+import dayjs from 'dayjs';
+import { Select } from './Select.js';
+import { OptionGroup } from './OptionGroup.js';
+
+export class DaySelect {
+    constructor() {
+        this._select = Select.createDaySelect();
+        this._minDate = null;
+    }
+
+    get select() {
+        return this._select;
+    }
+
+    set select(node) {
+        this._select = node;
+    }
+
+    getOptions() {
+        return Array.from(this._select.options);
+    }
+
+    setValue(dayJsDate) {
+        this._select.value = dayJsDate.format('YYYY-MM-DD');
+    }
+
+    enableOptions() {
+        this.getOptions().forEach((option) => {
+            option.disabled = false;
+        });
+    }
+
+    setMinDate(jsDateObject) {
+        if(!jsDateObject) {
+            this._minDate = null;
+        } else {
+            this._minDate = dayjs(jsDateObject).format('YYYY-MM-DD');
+        }
+        this._evalMinDate();
+    }
+
+    _evalMinDate() {
+        if(!this._minDate) {
+            this.enableOptions();
+        } else {
+            const minDate = dayjs(this._minDate);
+
+            this.getOptions().forEach((option) => {
+                option.disabled = dayjs(option.value).isBefore(minDate, 'day');
+            });
+        }
+    }
+
+    updateOptions(dayJsDate) {
+        const dayOptions = OptionGroup.createDayOptions(dayJsDate);
+
+        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/DomHelper.js

@@ -0,0 +1,11 @@
+export class DomHelper {
+    static createMarkup(daySelect, monthSelect) {
+        const wrapper = document.createElement("div");
+        wrapper.classList.add("inputGroup");
+
+        wrapper.appendChild(daySelect);
+        wrapper.appendChild(monthSelect);
+
+        return wrapper;
+    }
+}

package/src/InputGroup/utils/MonthSelect.js

@@ -0,0 +1,42 @@
+import dayjs from 'dayjs';
+import { Select } from './Select.js';
+import { OptionGroup } from './OptionGroup.js';
+
+export class MonthSelect {
+    constructor(optionGroups) {
+        this._select = Select.createMonthSelect(OptionGroup.getMonthOptions(optionGroups))
+    }
+
+    get select() {
+        return this._select;
+    }
+
+    set select(node) {
+        this._select = node;
+    }
+
+    getOptions() {
+        return Array.from(this._select.options);
+    }
+
+    setValue(dateString) {
+        this._select.value = dateString;
+    }
+
+    enableOptions() {
+        this.getOptions().forEach((option) => {
+            option.disabled = false;
+        });
+    }
+
+    setMinDate(jsDateObject) {
+        if(!jsDateObject) {
+            this.enableOptions();
+        } else {
+            const dayJsDate = dayjs(jsDateObject);
+            this.getOptions().forEach((option) => {
+                option.disabled = dayJsDate.isAfter(dayjs(option.value), 'month');
+            });
+        }
+    }
+}

package/src/InputGroup/utils/Option.js

@@ -0,0 +1,18 @@
+export class Option {
+    static createMonthOption(date) {
+        const formatted = date.format('MMMM YYYY');
+        return this.createOption(date.format('YYYY-MM-DD'), formatted);
+    }
+
+    static createDayOption(date) {
+        const formatted = date.format('ddd D');
+        return this.createOption(date.format('YYYY-MM-DD'), formatted);
+    }
+
+    static createOption(value, text) {
+        const option = document.createElement("option");
+        option.value = value;
+        option.textContent = text;
+        return option;
+    }
+}

package/src/InputGroup/utils/OptionGroup.js

@@ -0,0 +1,27 @@
+import { Option } from './Option.js';
+import { DateHelper } from './DateHelper.js';
+
+export class OptionGroup {
+    static createOptions(months) {
+        const options = [];
+
+        months.forEach((month) => {
+            options.push({
+                index: month.format('YYYY-MM-DD'),
+                month: Option.createMonthOption(month)
+            });
+        });
+
+        return options;
+    }
+
+    static createDayOptions(dayJsDate) {
+        const days = DateHelper.range(dayJsDate.subtract(1, 'month'), dayJsDate.add(1, 'month'), 'day');
+        const daysOfMonth = days.filter((day) => dayJsDate.isSame(day, 'month'));
+        return daysOfMonth.map((day) => Option.createDayOption(day));
+    }
+
+    static getMonthOptions(optionGroups) {
+        return optionGroups.map((group) => group.month.outerHTML).join('');
+    }
+}

package/src/InputGroup/utils/Select.js

@@ -0,0 +1,11 @@
+export class Select {
+    static createDaySelect() {
+        return document.createElement("select");
+    }
+
+    static createMonthSelect(monthOptions) {
+        const monthSelect = document.createElement("select");
+        monthSelect.innerHTML = monthOptions;
+        return monthSelect;
+    }
+}