datetime custom field

html/main.html

@@ -1,6 +1,11 @@
 <div>
   <h1>OpenBroadcaster</h1>
   <div id="main_page_content"></div>
+  <h2>More new fields testing</h2>
+  <ob-field-datetime value="aug 3 3pm" data-edit></ob-field-datetime>
+  <ob-field-time value="1pm" data-edit></ob-field-time>
+  <ob-field-date value="sep 2" data-edit></ob-field-date>
+  <ob-field-formatted data-edit></ob-field-formatted>
   <h2>Select bugfix test</h2>
   <ob-field-select id="select_bugfix" data-edit>
     <ob-option selected>Required</ob-option>

index.php

@@ -48,6 +48,7 @@
   'node_modules/jquery/dist/jquery.min.js',
   'node_modules/jquery-migrate/dist/jquery-migrate.min.js',
   'node_modules/video.js/dist/video.min.js',
+  'node_modules/dayjs/dayjs.min.js',
   'bundles/chrono-bundle.js'
 ];
 

package.json

@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "chrono-node": "^2.7.6",
+    "dayjs": "^1.11.11",
     "htm": "^3.1.1",
     "jquery": "^3.6.1",
     "jquery-migrate": "^3.4.0",

ui/fields/datetime.js

@@ -0,0 +1,78 @@
+import { html, render } from '../vendor.js'
+import { OBField } from '../base/field.js';
+
+class OBFieldDatetime extends OBField {
+    #init;
+
+    #valueObject;
+    #valueString;
+    #value;
+    #valueFormat = "YYYY-MM-DD HH:mm:ss";
+    #valueStringFormat = "MMM D, YYYY h:mm A";
+
+    connectedCallback() {
+        if (this.#init) {
+            return;
+        }
+        this.#init = true;
+
+        this.#valueObject = null;
+        this.#valueString = "";
+        this.#value = null;
+
+        this.renderComponent().then(() => {
+            if (this.hasAttribute('value')) {
+                this.value = this.getAttribute('value');
+            }
+        });
+    }
+
+    renderEdit() {
+        render(html`
+            <input onchange=${this.#updateValue.bind(this)} type="text" value="${this.#valueString}" />
+        `, this.root);
+    }
+
+    renderView() {
+        render(html`
+            <div>${this.#valueString}</div>
+        `, this.root);
+    }
+
+    scss() {
+        return `
+            :host {
+            }
+        `;
+    }
+
+    get value() {
+        return this.#valueString;
+    }
+
+    set value(value) {
+        const inputElem = this.root.querySelector('input');
+        inputElem.value = value;
+        inputElem.dispatchEvent(new Event('change'));
+
+    }
+
+    #updateValue(event) {
+        const value = event.target.value;
+        const datetime = chrono.casual.parseDate(value);
+        if (datetime) {
+            this.#valueObject = datetime;
+            this.#valueString = dayjs(datetime).format(this.#valueStringFormat);
+            this.#value = dayjs(datetime).format(this.#valueFormat);
+        } else {
+            this.#valueObject = null;
+            this.#valueString = "";
+            this.#value = null;
+        }
+
+        this.renderComponent();
+    }
+
+}
+
+customElements.define('ob-field-datetime', OBFieldDatetime);