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)
{
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;
}

View File

@ -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

View File

@ -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)

View File

@ -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

View File

@ -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>