add: dateSelector

lib/ui/grid/column.js

@@ -1,11 +1,11 @@
 import { global } from "../../utility";
-// import { nullOrEmpty } from "../../utility/strings";
 import { createElement } from "../../functions";
 import { createIcon } from "../icon";
 import { createCheckbox } from "../checkbox";
 // import { setTooltip } from "../tooltip";
 import { Dropdown } from "../dropdown";
 import { convertCssStyle } from "../extension";
+import { createDateInput, formatDate, setDateValue, getDateValue } from "../date";
 
 export class GridColumn {
     static create() {
@@ -296,87 +296,25 @@ export class GridDateColumn extends GridColumn {
         if (enabled === false) {
             return super.create();
         }
-        const date = createElement('input', 'ui-grid-date-cell');
-        date.required = true;
-        date.type = 'date';
-        if (col.dateMin != null) {
-            date.min = col.dateMin;
-        }
-        if (col.dateMax != null) {
-            date.max = col.dateMax;
-        }
+        const date = createDateInput(col.dateMin, col.dateMax);
         // date.addEventListener('change', trigger);
         date.addEventListener('blur', trigger);
         return date;
     }
 
     static setValue(element, val) {
-        if (element.tagName === 'INPUT') {
-            if (val === '') {
-                element.value = '';
-            } else if (isNaN(val)) {
-                if (/^\d{4}-\d{2}-\d{2}$/.test(val)) {
-                    element.value = val;
-                } else if (/^\d{1,2}\/\d{1,2}\/\d{4}$/.test(val)) {
-                    element.value = this._toDateValue(new Date(val));
-                } else {
-                    element.value = '';
-                }
-            } else {
-                if (!(val instanceof Date)) {
-                    val = new Date((val - 621355968e9) / 1e4);
-                }
-                element.value = this._toDateValue(val);
-            }
-        } else {
-            element.innerText = this.formatDate(val);
-        }
+        setDateValue(element, val);
     }
 
     static getValue(e, col) {
-        const date = e.target?.valueAsDate;
-        if (date instanceof Date && !isNaN(date)) {
-            const year = date.getFullYear();
-            if (year < 1900 || year > 9999) {
-                return '';
-            }
-            if (typeof col.dateValueFormatter === 'function') {
-                return col.dateValueFormatter(date);
-            }
-            return String(date.getTime() * 1e4 + 621355968e9);
-        }
-        return '';
+        return getDateValue(e.target, col.dateValueFormatter);
     }
 
     static setEnabled(element, enabled) {
         element.disabled = enabled === false;
     }
 
-    static _toDateValue(dt) {
-        if (isNaN(dt)) {
-            return '';
-        }
-        const month = String(dt.getMonth() + 1).padStart(2, '0');
-        const date = String(dt.getDate()).padStart(2, '0');
-        return `${dt.getFullYear()}-${month}-${date}`;
-    }
-
-    static _resolveDate(s) {
-        if (s instanceof Date) {
-            return s;
-        }
-        const ticks = Number(s);
-        if (!isNaN(ticks) && ticks > 0) {
-            return new Date((ticks - 621355968e9) / 1e4);
-        }
-        return new Date(s);
-    }
-
     static formatDate(date) {
-        date = this._resolveDate(date);
-        if (date instanceof Date && !isNaN(date)) {
-            return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
-        }
-        return '';
+        return formatDate(date);
     }
 }