diff --git a/html/main.html b/html/main.html
index 9fb8a182..05d967dc 100644
--- a/html/main.html
+++ b/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>
diff --git a/index.php b/index.php
index 39b6142a..4a2306f7 100644
--- a/index.php
+++ b/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'
 ];
 
diff --git a/package.json b/package.json
index 0cc986f0..8e2924d5 100644
--- a/package.json
+++ b/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",
diff --git a/ui/fields/datetime.js b/ui/fields/datetime.js
new file mode 100644
index 00000000..8f727eb2
--- /dev/null
+++ b/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);
\ No newline at end of file