web: fix datetime-local fields throwing errors on firefox
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
parent
12a523c7aa
commit
930dd51663
|
@ -6,7 +6,7 @@ import { DEFAULT_CONFIG } from "../../../api/Config";
|
|||
import "../../../elements/forms/HorizontalFormElement";
|
||||
import "../../../elements/CodeMirror";
|
||||
import YAML from "yaml";
|
||||
import { first } from "../../../utils";
|
||||
import { dateTimeLocal, first } from "../../../utils";
|
||||
import { ModelForm } from "../../../elements/forms/ModelForm";
|
||||
|
||||
@customElement("ak-invitation-form")
|
||||
|
@ -41,7 +41,12 @@ export class InvitationForm extends ModelForm<Invitation, string> {
|
|||
renderForm(): TemplateResult {
|
||||
return html`<form class="pf-c-form pf-m-horizontal">
|
||||
<ak-form-element-horizontal label=${t`Expires`} ?required=${true} name="expires">
|
||||
<input type="date" class="pf-c-form-control" required />
|
||||
<input
|
||||
type="datetime-local"
|
||||
class="pf-c-form-control"
|
||||
required
|
||||
value="${dateTimeLocal(first(this.instance?.expires, new Date()))}"
|
||||
/>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal label=${t`Attributes`} name="fixedData">
|
||||
<ak-codemirror
|
||||
|
|
|
@ -5,7 +5,7 @@ import { html, TemplateResult } from "lit-html";
|
|||
import { DEFAULT_CONFIG } from "../../api/Config";
|
||||
import "../../elements/forms/HorizontalFormElement";
|
||||
import "../../elements/forms/FormGroup";
|
||||
import { first } from "../../utils";
|
||||
import { dateTimeLocal, first } from "../../utils";
|
||||
import { ModelForm } from "../../elements/forms/ModelForm";
|
||||
import { until } from "lit-html/directives/until";
|
||||
|
||||
|
@ -111,7 +111,7 @@ export class TokenForm extends ModelForm<Token, string> {
|
|||
<ak-form-element-horizontal label=${t`Expires on`} name="expires">
|
||||
<input
|
||||
type="datetime-local"
|
||||
.valueAsNumber="${first(this.instance?.expires, new Date()).getTime()}"
|
||||
value="${dateTimeLocal(first(this.instance?.expires, new Date()))}"
|
||||
class="pf-c-form-control"
|
||||
/>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
|
@ -87,3 +87,13 @@ export function randomString(len: number): string {
|
|||
window.crypto.getRandomValues(arr);
|
||||
return hexEncode(arr);
|
||||
}
|
||||
|
||||
export function dateTimeLocal(date: Date): string {
|
||||
// So for some reason, the datetime-local input field requires ISO Datetime as value
|
||||
// But the standard javascript date.toISOString() returns everything with seconds and
|
||||
// milliseconds, which the input field doesn't like (on chrome, on firefox its fine)
|
||||
// On chrome, setting .valueAsNumber works, but that causes an error on firefox, so go
|
||||
// figure.
|
||||
const parts = date.toISOString().split(":");
|
||||
return `${parts[0]}:${parts[1]}`;
|
||||
}
|
||||
|
|
Reference in a new issue