Butchering the UI framework

UI/Input/SimpleDatePicker.ts

@@ -5,48 +5,37 @@ export default class SimpleDatePicker extends InputElement<string> {
 
     private readonly value: UIEventSource<string>
 
+    private readonly _element: HTMLElement;
+    
     constructor(
         value?: UIEventSource<string>
     ) {
         super();
         this.value = value ?? new UIEventSource<string>(undefined);
         const self = this;
+       
+        const el = document.createElement("input")
+        this._element = el;
+        el.type = "date"
+        el.oninput = () => {
+            // Already in YYYY-MM-DD value! 
+            self.value.setData(el.value);
+        }
+
+
         this.value.addCallbackAndRun(v => {
             if(v === undefined){
                 return;
             }
-            self.SetValue(v);
+            el.value = v;
         });
-    }
 
 
-    InnerRender(): string {
-        return `<span id="${this.id}"><input type='date' id='date-${this.id}'></span>`;
-    }
-    
-    private SetValue(date: string){
-        const field = document.getElementById("date-" + this.id);
-        if (field === undefined || field === null) {
-            return;
-        }
-        // @ts-ignore
-        field.value = date;
-    }
-
-    protected InnerUpdate() {
-        const field = document.getElementById("date-" + this.id);
-        if (field === undefined || field === null) {
-            return;
-        }
-        const self = this;
-        field.oninput = () => {
-            // Already in YYYY-MM-DD value! 
-            // @ts-ignore
-            self.value.setData(field.value);
-        }
-
     }
 
+    protected InnerConstructElement(): HTMLElement {
+        return this._element
+    }
     GetValue(): UIEventSource<string> {
         return this.value;
     }