export DateSelector, fix issue about column.align and filter panel position of the last header cell.

lib/ui/date.js

@@ -1,7 +1,13 @@
 import { createElement } from "../functions";
 
-export function createDateInput(min, max) {
-    const date = createElement('input', 'ui-date-cell');
+export function createDateInput(min, max, element) {
+    let date;
+    if (element instanceof HTMLInputElement) {
+        date = element;
+        date.classList.add('ui-date-cell');
+    } else {
+        date = createElement('input', 'ui-date-cell');
+    }
     date.required = true;
     date.type = 'date';
     if (min != null) {
@@ -89,16 +95,15 @@ export class DateSelector {
 
     constructor(opts) {
         opts ??= {};
-        if (typeof opts.parent === 'string') {
-            opts.parent = document.querySelector(opts.parent);
-        }
-        if (!(opts.parent instanceof HTMLElement)) {
-            throw new Error('no specified parent.');
-        }
         this._var.options = opts;
-        this._var.parent = opts.parent;
+    }
 
-        const el = createDateInput(opts.minDate, opts.maxDate);
+    create(element) {
+        const opts = this._var.options;
+        const el = createDateInput(opts.minDate, opts.maxDate, element);
+        if (element == null) {
+            el.disabled = opts.enabled === false;
+        }
         el.addEventListener('blur', e => {
             const date = this._getDate(e.target.valueAsDate);
             if (date == null) {
@@ -109,9 +114,11 @@ export class DateSelector {
             }
         });
         this._var.el = el;
-        parent.appendChild(el);
+        return el;
     }
 
+    get element() { return this._var.el }
+
     get enabled() { return !this._var.el.disabled }
     set enabled(flag) {
         this._var.el.disabled = flag === false;
@@ -122,16 +129,13 @@ export class DateSelector {
         setDateValue(this._var.el, val);
     }
 
-    /**
-     * @param {string} date
-     */
+    get minDate() { return this._var.el.min }
     set minDate(date) {
         this._var.el.min = date;
         this._var.options.minDate = date;
     }
-    /**
-     * @param {string} date
-     */
+
+    get maxDate() { return this._var.el.max }
     set maxDate(date) {
         this._var.el.max = date;
         this._var.options.maxDate = date;
@@ -150,4 +154,23 @@ export class DateSelector {
         }
         return null;
     }
+
+    static resolve(dom = document.body, trigger) {
+        const dates = dom.querySelectorAll('input[data-type="date"]');
+        for (let dat of dates) {
+            const val = dat.value;
+            const dateSelector = new DateSelector({
+                minDate: dat.getAttribute('data-min'),
+                maxDate: dat.getAttribute('data-max')
+            });
+            if (typeof trigger === 'function') {
+                dateSelector.onDateChanged = date => trigger.call(dateSelector, date);
+            }
+            dat.removeAttribute('data-type');
+            dat.removeAttribute('data-min');
+            dat.removeAttribute('data-max');
+            dateSelector.create(dat);
+            dateSelector.value = val;
+        }
+    }
 }