alchemy-form 0.3.0-alpha.4 → 0.3.0-alpha.5

package/CHANGELOG.md

@@ -1,4 +1,8 @@
-## 0.3.0-alpha.4
+## 0.3.0-alpha.5 (2025-07-10)
+
+* Add `al-datetime-input` to properly handle Date values with timezones
+
+## 0.3.0-alpha.4 (2025-07-10)
 
 * Always make `al-field`'s `getFieldType()` method return a string
 * Add the `mixed` field view

package/assets/stylesheets/form/elements/_datetime.scss

@@ -0,0 +1,6 @@
+al-datetime-input {
+	> * {
+		width: 100%;
+		height: 100%;
+	}
+}

package/assets/stylesheets/form/elements/index.scss

@@ -17,3 +17,4 @@
 @use "_virtual_scroll.scss";
 @use "_settings_editor.scss";
 @use "_enum_badge.scss";
+@use "_datetime.scss";

package/element/al_datetime_input.js

@@ -0,0 +1,127 @@
+/**
+ * The al-datetime-input:
+ * Populate an input on the browser-side with correct timezone info
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+const DatetimeInput = Function.inherits('Alchemy.Element.Form.Base', 'DatetimeInput');
+
+/**
+ * Get/set the mode
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+DatetimeInput.setAttribute('datemode', null, function setMode(datemode) {
+	this.populateInputWithValue(this.value, datemode);
+	return datemode;
+});
+
+/**
+ * Get/set the value
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+DatetimeInput.setAttribute('value', null, function setValue(value) {
+	return this.populateInputWithValue(value, this.datemode);
+});
+
+/**
+ * Set the value with a function call
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+DatetimeInput.setMethod(function setValue(value) {
+	this.value = value;
+});
+
+/**
+ * Revalidate the value
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ *
+ * @return   {Object[]}
+ */
+DatetimeInput.setMethod(function populateInput() {
+	return this.populateInputWithValue(this.value, this.datemode);
+});
+
+/**
+ * Revalidate the value
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ *
+ * @return   {Object[]}
+ */
+DatetimeInput.setMethod(function populateInputWithValue(value, datemode) {
+
+	let iso_date,
+	    date;
+
+	if (value) {
+		date = Date.create(value);
+		iso_date = date.toISOString();
+	} else {
+		iso_date = '';
+	}
+
+	value = iso_date;
+
+	if (Blast.isServer) {
+		return value;
+	}
+
+	if (arguments.length == 1) {
+		datemode = this.datemode;
+	}
+
+	let input = this.querySelector('input');
+
+	if (!datemode) {
+		datemode = 'datetime';
+	}
+
+	if (!input) {
+		input = this.createElement('input');
+		input.setAttribute('type', datemode + '-local');
+	}
+
+	if (!value) {
+		input.value = '';
+		return '';
+	}
+
+	let formatted;
+
+	if (datemode == 'date') {
+		formatted = date.format('Y-m-d');
+	} else {
+		formatted = date.format('Y-m-d\\TH:i:s');
+	}
+
+	input.value = formatted;
+
+	return iso_date;
+});
+
+/**
+ * Added to the DOM
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+DatetimeInput.setMethod(function introduced() {
+	this.populateInput();
+});

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "alchemy-form",
 	"description": "Form plugin for Alchemy",
-	"version": "0.3.0-alpha.4",
+	"version": "0.3.0-alpha.5",
 	"repository": {
 		"type" : "git",
 		"url"  : "https://github.com/11ways/alchemy-form.git"

package/view/form/inputs/edit/date.hwk

@@ -1,13 +1,13 @@
-<%
-if (value) {
-	value = value.format('Y-m-d');
-}
-%>
-<input
-	value=<% value %>
-	class="alchemy-field-value"
-	type="date"
-	form=<% form_id %>
-	name=<% path %>
-	pattern="\d{4}-\d{2}-\d{2}"
->
+<al-datetime-input
+	datemode="date"
+>
+	<% $0.setValue(value) %>
+	<input
+		value=<% value %>
+		class="alchemy-field-value"
+		type="date"
+		form=<% form_id %>
+		name=<% path %>
+		pattern="\d{4}-\d{2}-\d{2}"
+	>
+</al-datetime-input>

package/view/form/inputs/edit/datetime.hwk

@@ -1,20 +1,13 @@
-<%
-
-if (value) {
-
-	// Make sure it's a date
-	value = Date.create(value);
-
-	// According to MDN `toISOString()` should work,
-	// but neither Chrome or Firefox allow that format (it still contains timezone info)
-	value = value.format('Y-m-d\\TH:i:s');
-}
-%>
-<input
-	value=<% value %>
-	class="alchemy-field-value"
-	type="datetime-local"
-	form=<% form_id %>
-	name=<% path %>
-	pattern="\d{4}-\d{2}-\d{2} \d{1,2}:\d{1,2}(?::\d{1,2})?"
->
+<al-datetime-input
+	datemode="datetime"
+>
+	<% $0.setValue(value) %>
+	<input
+		class="alchemy-field-value"
+		type="datetime-local"
+		form=<% form_id %>
+		name=<% path %>
+		pattern="\d{4}-\d{2}-\d{2} \d{1,2}:\d{1,2}(?::\d{1,2})?"
+		value=""
+	>
+</al-datetime-input>