From 896f77f2fd6d1ff764d05d5471f5336504c5a4a1 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Tue, 5 Sep 2023 11:21:09 -0600
Subject: [PATCH] Fix date & time formatting on mobile - Date & DateTimeOnly
 did not show value - timesheet view was missing start time

---
 api/js/etemplate/Et2Date/Et2Date.ts          |  9 ++++--
 api/js/etemplate/Et2Date/Et2DateTime.ts      | 14 +++++++++-
 api/js/etemplate/Et2Date/Et2DateTimeOnly.ts  | 29 +++++++++++++++++++-
 api/js/etemplate/Et2Date/Et2DateTimeToday.ts |  4 +--
 timesheet/templates/mobile/view.xet          |  2 +-
 5 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/api/js/etemplate/Et2Date/Et2Date.ts b/api/js/etemplate/Et2Date/Et2Date.ts
index 9bfecc9c81..c34dd1309e 100644
--- a/api/js/etemplate/Et2Date/Et2Date.ts
+++ b/api/js/etemplate/Et2Date/Et2Date.ts
@@ -627,13 +627,13 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(LitFlatpickr))
 		{
 			if(this._inputNode)
 			{
-				this._inputNode.value = isNaN(date) ? "" : this.format(date, {dateFormat: 'Y-m-dTH:i'});
+				this._inputNode.value = isNaN(date) ? "" : this.format(date);
 			}
 			else
 			{
 				this.updateComplete.then(() =>
 				{
-					this._inputNode.value = isNaN(date) ? "" : this.format(date, {dateFormat: 'Y-m-dTH:i'});
+					this._inputNode.value = isNaN(date) ? "" : this.format(date);
 				});
 			}
 			return;
@@ -684,6 +684,11 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(LitFlatpickr))
 
 	get format() : Function
 	{
+		// Mobile is specific about the date format, no time allowed
+		if(typeof egwIsMobile == "function" && egwIsMobile())
+		{
+			return (date) => {return formatDate(date, {dateFormat: "Y-m-d"});};
+		}
 		return formatDate;
 	}
 
diff --git a/api/js/etemplate/Et2Date/Et2DateTime.ts b/api/js/etemplate/Et2Date/Et2DateTime.ts
index 760c448db4..1d27e10a6e 100644
--- a/api/js/etemplate/Et2Date/Et2DateTime.ts
+++ b/api/js/etemplate/Et2Date/Et2DateTime.ts
@@ -10,7 +10,7 @@
 
 
 import {css} from "@lion/core";
-import {Et2Date} from "./Et2Date";
+import {Et2Date, formatDate, formatDateTime} from "./Et2Date";
 import type {Instance} from "flatpickr/dist/types/instance";
 import {default as ShortcutButtonsPlugin} from "shortcut-buttons-flatpickr/dist/shortcut-buttons-flatpickr";
 
@@ -110,6 +110,18 @@ export class Et2DateTime extends Et2Date
 		return "datetime-local";
 	}
 
+	get format() : Function
+	{
+		// Mobile is specific about the date format
+		if(typeof egwIsMobile == "function" && egwIsMobile())
+		{
+			// Use formatDate() for full control, formatDateTime() will add a space
+			return (date) => {return formatDate(date, {dateFormat: "Y-m-dTH:i"});};
+		}
+
+		return formatDateTime;
+	}
+
 	/**
 	 * Add "today" button below calendar
 	 * @protected
diff --git a/api/js/etemplate/Et2Date/Et2DateTimeOnly.ts b/api/js/etemplate/Et2Date/Et2DateTimeOnly.ts
index a5927f559e..abc32550e6 100644
--- a/api/js/etemplate/Et2Date/Et2DateTimeOnly.ts
+++ b/api/js/etemplate/Et2Date/Et2DateTimeOnly.ts
@@ -10,6 +10,7 @@
 
 
 import {Et2DateTime} from "./Et2DateTime";
+import {formatDate} from "./Et2Date";
 
 
 export class Et2DateTimeOnly extends Et2DateTime
@@ -75,6 +76,16 @@ export class Et2DateTimeOnly extends Et2DateTime
 		return "time";
 	}
 
+	get format() : Function
+	{
+		// Mobile is specific about the date format
+		if(typeof egwIsMobile == "function" && egwIsMobile())
+		{
+			return (date) => {return formatDate(date, {dateFormat: "H:i"});};
+		}
+		return super.format;
+	}
+
 	set_value(value)
 	{
 		let adjustedValue : Date | string = '';
@@ -82,10 +93,26 @@ export class Et2DateTimeOnly extends Et2DateTime
 		{
 			value = '';
 		}
+		let date = new Date(value);
+		if(typeof egwIsMobile == "function" && egwIsMobile())
+		{
+			date = new Date(value);
+			if(this._inputNode)
+			{
+				this._inputNode.value = isNaN(<any>date) ? "" : this.format(date);
+			}
+			else
+			{
+				this.updateComplete.then(() =>
+				{
+					this._inputNode.value = isNaN(<any>date) ? "" : this.format(date);
+				});
+			}
+			return;
+		}
 		// Handle timezone offset, flatpickr uses local time
 		if(value)
 		{
-			let date = new Date(value);
 			adjustedValue = new Date(date.valueOf() + date.getTimezoneOffset() * 60 * 1000);
 			adjustedValue.setDate(1);
 			adjustedValue.setMonth(0)
diff --git a/api/js/etemplate/Et2Date/Et2DateTimeToday.ts b/api/js/etemplate/Et2Date/Et2DateTimeToday.ts
index 71923b6145..9348bf62db 100644
--- a/api/js/etemplate/Et2Date/Et2DateTimeToday.ts
+++ b/api/js/etemplate/Et2Date/Et2DateTimeToday.ts
@@ -7,7 +7,7 @@
  * @author Nathan Gray
  */
 
-import {formatDate, formatDateTime, formatTime, parseDateTime} from "./Et2Date";
+import {formatDate, formatTime, parseDateTime} from "./Et2Date";
 import {Et2DateReadonly} from "./Et2DateReadonly";
 
 /**
@@ -25,7 +25,7 @@ export class Et2DateTimeToday extends Et2DateReadonly
 
 	/**
 	 * Format date+time relative to "now"
-	 * If the date is today, we show just the time.  Otherwise, the date and time.
+	 * If the date is today, we show just the time.  Otherwise, the date.
 	 *
 	 * @param {Date} date
 	 * @param {import('@lion/localize/types/LocalizeMixinTypes').FormatDateOptions} [options] Intl options are available
diff --git a/timesheet/templates/mobile/view.xet b/timesheet/templates/mobile/view.xet
index e76d2f6816..419767db32 100644
--- a/timesheet/templates/mobile/view.xet
+++ b/timesheet/templates/mobile/view.xet
@@ -103,7 +103,7 @@
 				</row>
 				<row>
 					<et2-description  value="Starttime"></et2-description>
-					<et2-date-timeonly  id="start_time" dataFormat="H:i"></et2-date-timeonly>
+                    <et2-date-timeonly id="ts_start" dataFormat="H:i"></et2-date-timeonly>
 				</row>
 				<row>
 					<et2-description  value="Duration" for="ts_duration"></et2-description>