Fix missing label in date widgets

api/js/etemplate/Et2Date/DateStyles.ts

@@ -17,14 +17,15 @@ export const dateStyles = [
 	.overdue {
 		color: red; // var(--whatever the theme color)
 	}
-	input.flatpickr-input {
+	input.flatpickr {
 		border: 1px solid;
 		border-color: var(--input-border-color);
 		color: var(--input-text-color);
 		padding-top: 4px;
 		padding-bottom: 4px;
+		flex: 1 1 auto;
 	}
-	input.flatpickr-input:hover {
+	input.flatpickr:hover {
 		background-image: ${cssImage("datepopup")};
 		background-repeat: no-repeat;
 		background-position-x: right;

api/js/etemplate/Et2Date/Et2Date.ts

@@ -9,7 +9,8 @@
  */
 
 
-import {css} from "@lion/core";
+import {css, html} from "@lion/core";
+import {FormControlMixin} from "@lion/form-core";
 import 'lit-flatpickr';
 import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
 import {dateStyles} from "./DateStyles";
@@ -269,7 +270,7 @@ export function formatDateTime(date : Date, options = {dateFormat: "", timeForma
 	return formatDate(date, options) + " " + formatTime(date, options);
 }
 
-export class Et2Date extends Et2InputWidget(LitFlatpickr)
+export class Et2Date extends Et2InputWidget(FormControlMixin(LitFlatpickr))
 {
 	static get styles()
 	{
@@ -326,6 +327,7 @@ export class Et2Date extends Et2InputWidget(LitFlatpickr)
 		options.weekNumbers = true;
 
 		// Turn on scroll wheel support
+		// @ts-ignore TypeScript can't find scrollPlugin, but rollup does
 		options.plugins = [new scrollPlugin()];
 
 		return options;
@@ -372,6 +374,36 @@ export class Et2Date extends Et2InputWidget(LitFlatpickr)
 
 		return value;
 	}
+
+	_inputGroupInputTemplate()
+	{
+		return html`
+            <div class="input-group__input">
+                <slot name="input">
+                    <input class="lit-flatpickr flatpickr flatpickr-input"
+                           placeholder=${this.placeholder}/>
+                </slot>
+            </div>
+		`;
+	}
+
+	/**
+	 * Override from flatpickr
+	 * @returns {any}
+	 */
+	findInputField()
+	{
+		return this._inputNode;
+	}
+
+	/**
+	 * The interactive (form) element.  Override from Lion
+	 * @protected
+	 */
+	get _inputNode()
+	{
+		return /** @type {HTMLElementWithValue} */ (this.shadowRoot.querySelector('input'));
+	}
 }
 
 // @ts-ignore TypeScript is not recognizing that Et2Date is a LitElement

api/js/etemplate/Et2Date/Et2DateDuration.ts

@@ -14,6 +14,7 @@ import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
 import {sprintf} from "../../egw_action/egw_action_common";
 import {dateStyles} from "./DateStyles";
 import {cssImage} from "../Et2Widget/Et2Widget";
+import {FormControlMixin} from "@lion/form-core";
 
 export interface formatOptions
 {
@@ -110,7 +111,7 @@ export function formatDuration(value : number | string, options : formatOptions)
  * If not specified, the time is in assumed to be minutes and will be displayed with a calculated unit
  * but this can be specified with the properties.
  */
-export class Et2DateDuration extends Et2InputWidget(LitElement)
+export class Et2DateDuration extends Et2InputWidget(FormControlMixin(LitElement))
 {
 	static get styles()
 	{
@@ -118,8 +119,8 @@ export class Et2DateDuration extends Et2InputWidget(LitElement)
 			...super.styles,
 			...dateStyles,
 			css`
-			:host {
-				display: inline-flex;
+			.form-field__group-two {
+				width: 100%;
 			}
 			select {
 				color: var(--input-text-color);
@@ -307,15 +308,23 @@ export class Et2DateDuration extends Et2InputWidget(LitElement)
 		this.requestUpdate();
 	}
 
-
-	render()
+	/**
+	 * @return {TemplateResult}
+	 * @protected
+	 */
+	// eslint-disable-next-line class-methods-use-this
+	_inputGroupInputTemplate()
 	{
 		return html`
-            ${this._inputTemplate()}
-            ${this._formatTemplate()}`;
+            <div class="input-group__input">
+                <slot name="input">
+                    ${this._inputTemplate()}
+                    ${this._formatTemplate()}
+                </slot>
+            </div>
+		`;
 	}
 
-
 	/**
 	 * Converts the value in data format into value in display format.
 	 *

api/js/etemplate/Et2Date/Et2DateTimeOnly.ts

@@ -50,6 +50,19 @@ export class Et2DateTimeOnly extends Et2DateTime
 		options.noCalendar = true;
 		options.dateFormat = "1970-01-01TH:i:00\\Z";
 
+		// Time only does not have year & month, which scrollPlugin blindly tries to use
+		// This causes an error and interrupts the initialization
+		options.plugins.push(instance =>
+		{
+			return {
+				onReady: function()
+				{
+					this.yearElements = []
+					this.monthElements = []
+				}
+			}
+		});
+
 		return options;
 	}