Magento 2 Timepicker anzeigen mit UiComponent statt Datepicker

Ich möchte den Zeitmesser in meiner UiComponent-Form anzeigen

Wie Magento Docs die Variationen zeigt, bieten sie einen Zeitmesser:

Ich möchte dies mit UiComponent in meinem Formular.

Hinweis: Sie müssen die Planungszeit anzeigen, damit kein Datum erforderlich ist.

Überprüfte Referenz: Wie füge ich in Magento 2 einen Zeitbereichswähler zum AdminHTML-Formular hinzu? (Aber es ist mit Block, ich möchte mit UiComponent)

Sie müssen Ihre eigene UI-Komponente erstellen. Sie können dies tun, indem Sie die Date UI Component erweitern.

# 1 Fügen Sie das XML zu Ihrem Formular hinzu

Fügen Sie das Feld der Feldmenge hinzu. In diesem Beispiel wird die zu erstellende Komponente aufgerufen time. Beachten Sie, dass Sie templatein der folgenden XML eine deklarieren können. Dies ist jedoch nicht wirklich hilfreich, da die XHTML-Vorlage die Knockout-Vorlage umschließt, die das eigentliche Rendering ausführt. Es gibt andere Knoten, die Sie hier als Validierung deklarieren können.

<field name="time_field">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Time</item>
            <item name="dataType" xsi:type="string">text</item>
            <item name="formElement" xsi:type="string">date</item>
            <item name="dataScope" xsi:type="string">time_field</item>
            <item name="component" xsi:type="string">Your_Module/js/form/element/time</item>
        </item>
    </argument>
</field>

# 2 Erstellen Sie die UI-Komponente

// app/code/Your/Module/view/adminhtml/web/js/form/element/time.js

define([
    'Magento_Ui/js/form/element/date'
], function(Date) {
    'use strict';

    return Date.extend({
        defaults: {
            options: {
                showsDate: false,
                showsTime: true,
                timeOnly: true
            },

            elementTmpl: 'ui/form/element/date'
        }
    });
});

Ein paar Hinweise zum obigen Javascript:

elementTmplist nicht nötig. Wenn Sie jedoch die Vorlage anpassen möchten (derzeitmodule-ui/view/base/web/templates/form/element/date.html ) , erstellen Sie einfach eine eigene Vorlage und verweisen Sie darauf elementTmpl.

Es gibt mehr Optionen für die Eingabe. Sie können mehr über sie finden: http://trentrichardson.com/examples/timepicker/#tp-options . Im Code gibt es hier eine Liste aller Standardeinstellungen:/lib/web/jquery/jquery-ui-timepicker-addon.js

Endresultat:

• Zum gegenwärtigen Zeitpunkt glaube ich nicht, dass es möglich ist, Ihre eigene UI-Komponente auf ähnliche Weise wie die von zu deklarieren definitions.xml. Sie können jedoch erweitern sie mit minimalem Aufwand. (Und wenn es einen Weg gibt, lass es mich bitte wissen).

Sie können diesen XML-Code einfach für das gleiche Ergebnis wie oben verwenden:

<field name="opening_time">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">string</item>
            <item name="label" xsi:type="string" translate="true">Opening time</item>
            <item name="formElement" xsi:type="string">date</item>
            <item name="source" xsi:type="string">page</item>
            <item name="sortOrder" xsi:type="number">70</item>
            <item name="dataScope" xsi:type="string">opening_time</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
            <item name="options" xsi:type="array">
                <item name="dateFormat" xsi:type="string">yyyy-MM-dd</item>
                <item name="timeFormat" xsi:type="string">HH:mm:ss</item>
                <item name="showsTime" xsi:type="boolean">true</item>
                <item name="timeOnly" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

Ergebnis: