Fix date & time formatting on mobile

- Date & DateTimeOnly did not show value
- timesheet view was missing start time
This commit is contained in:
nathan 2023-09-05 11:21:09 -06:00
parent b5758a2268
commit 896f77f2fd
5 changed files with 51 additions and 7 deletions

View File

@ -627,13 +627,13 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(LitFlatpickr))
{ {
if(this._inputNode) 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 else
{ {
this.updateComplete.then(() => 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; return;
@ -684,6 +684,11 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(LitFlatpickr))
get format() : Function 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; return formatDate;
} }

View File

@ -10,7 +10,7 @@
import {css} from "@lion/core"; import {css} from "@lion/core";
import {Et2Date} from "./Et2Date"; import {Et2Date, formatDate, formatDateTime} from "./Et2Date";
import type {Instance} from "flatpickr/dist/types/instance"; import type {Instance} from "flatpickr/dist/types/instance";
import {default as ShortcutButtonsPlugin} from "shortcut-buttons-flatpickr/dist/shortcut-buttons-flatpickr"; import {default as ShortcutButtonsPlugin} from "shortcut-buttons-flatpickr/dist/shortcut-buttons-flatpickr";
@ -110,6 +110,18 @@ export class Et2DateTime extends Et2Date
return "datetime-local"; 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 * Add "today" button below calendar
* @protected * @protected

View File

@ -10,6 +10,7 @@
import {Et2DateTime} from "./Et2DateTime"; import {Et2DateTime} from "./Et2DateTime";
import {formatDate} from "./Et2Date";
export class Et2DateTimeOnly extends Et2DateTime export class Et2DateTimeOnly extends Et2DateTime
@ -75,6 +76,16 @@ export class Et2DateTimeOnly extends Et2DateTime
return "time"; 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) set_value(value)
{ {
let adjustedValue : Date | string = ''; let adjustedValue : Date | string = '';
@ -82,10 +93,26 @@ export class Et2DateTimeOnly extends Et2DateTime
{ {
value = ''; 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 // Handle timezone offset, flatpickr uses local time
if(value) if(value)
{ {
let date = new Date(value);
adjustedValue = new Date(date.valueOf() + date.getTimezoneOffset() * 60 * 1000); adjustedValue = new Date(date.valueOf() + date.getTimezoneOffset() * 60 * 1000);
adjustedValue.setDate(1); adjustedValue.setDate(1);
adjustedValue.setMonth(0) adjustedValue.setMonth(0)

View File

@ -7,7 +7,7 @@
* @author Nathan Gray * @author Nathan Gray
*/ */
import {formatDate, formatDateTime, formatTime, parseDateTime} from "./Et2Date"; import {formatDate, formatTime, parseDateTime} from "./Et2Date";
import {Et2DateReadonly} from "./Et2DateReadonly"; import {Et2DateReadonly} from "./Et2DateReadonly";
/** /**
@ -25,7 +25,7 @@ export class Et2DateTimeToday extends Et2DateReadonly
/** /**
* Format date+time relative to "now" * 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 {Date} date
* @param {import('@lion/localize/types/LocalizeMixinTypes').FormatDateOptions} [options] Intl options are available * @param {import('@lion/localize/types/LocalizeMixinTypes').FormatDateOptions} [options] Intl options are available

View File

@ -103,7 +103,7 @@
</row> </row>
<row> <row>
<et2-description value="Starttime"></et2-description> <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>
<row> <row>
<et2-description value="Duration" for="ts_duration"></et2-description> <et2-description value="Duration" for="ts_duration"></et2-description>