Custom DateTime Selector

src/electron/frontend/core/components/DateTimeSelector.js

@@ -31,16 +31,28 @@ export class DateTimeSelector extends LitElement {
             this.input.value = convertToDateTimeLocalString(d);
         }
     }
+    get min() {
+        return this.input.min;
+    }
+
+    set min(newValue) {
+        this.input.min = newValue;
+    }
+
+    get max() {
+        return this.input.max;
+    }
+
+    set max(newValue) {
+        this.input.max = newValue;
+    }
 
-    constructor({ value, schema } = {}) {
+    constructor({ value, min, max } = {}) {
         super();
         this.input = document.createElement("input");
         this.input.type = "datetime-local";
-        if (schema) {
-            const { min, max } = schema;
-            if (min) this.input.min = min;
-            if (max) this.input.max = max;
-        }
+        this.input.min = min;
+        this.input.max = max;
 
         this.addEventListener("click", () => {
             this.input.focus();

src/electron/frontend/core/components/hot.js

@@ -60,8 +60,8 @@ class DateTimeEditor extends Handsontable.editors.BaseEditor {
         style.margin = "0px";
         style.display = "";
 
-        this.DATETIME.input.min = this.cellProperties.min;
-        this.DATETIME.input.max = this.cellProperties.max;
+        this.DATETIME.min = this.cellProperties.min;
+        this.DATETIME.max = this.cellProperties.max;
     }
 
     focus() {

stories/components/DateTimeSelector.stories.js

@@ -0,0 +1,14 @@
+import { DateTimeSelector } from "../../src/electron/frontend/core/components/DateTimeSelector";
+
+export default {
+    title: "Components/DateTime Selector",
+};
+
+const Template = (args) => new DateTimeSelector(args);
+
+export const Default = Template.bind({});
+export const Limited = Template.bind({});
+Limited.args = {
+    min: "2024-01-01T00:00",
+    max: "2024-12-31T23:59",
+};

tsconfig.json

@@ -13,6 +13,6 @@
     "noUnusedParameters": true,
     "noImplicitReturns": true
   },
-  "include": ["src", "src/schemas", "frontend", "stories/components/Table.stories.js", "stories/components/Search.stories.js", "stories/components/ProgressBar.stories.js", "stories/components/OptionalSection.stories.js", "stories/components/List.stories.js", "stories/components/JSONSchemaForm.stories.js", "stories/components/InstanceManager.stories.js", "stories/components/FileSystemSelector.stories.js", "stories/components/Button.stories.js", "stories/components/Accordion.stories.js", "stories/components/InspectorList.stories.js", "stories/components/StatusBar.stories.js", "stories/components/Multiselect.stories.js", "stories/Pages.stories.js", "stories/pages/GuidedHome.stories.js", "stories/components/Locate.stories.js", "stories/pages/Metadata.stories.js", "stories/pages/NewDataset.stories.js", "stories/pages/Preview.stories.js", "stories/pages/Review.stories.js", "stories/pages/SourceData.stories.js", "stories/pages/Structure.stories.js", "stories/pages/Subjects.stories.js", "stories/pages/Upload.stories.js", "stories/pages/storyStates.ts"],
+  "include": ["src", "stories", "tests" ],
   "exclude": ["node_modules"]
 }