Magento 2 Pokaż timepicker przy użyciu UiComponent, a nie Datepicker

Chcę pokazać timepicker w mojej formie UiComponent

Gdy Magento Docs pokazują odmiany, które zapewniają timepicker:

Chcę to za pomocą UiComponent w mojej formie.

Uwaga: Musisz pokazać harmonogram, aby data nie była potrzebna.

Sprawdzone odniesienie: Jak dodać próbnik zakresu czasu do formularza adminhtml w Magento 2? (Ale używa bloku, chcę używać UiComponent)

Musisz „stworzyć” * swój własny komponent interfejsu użytkownika. Możesz to zrobić, rozszerzając składnik interfejsu użytkownika daty.

# 1 Dodaj kod XML do formularza

Dodaj pole do zestawu pól. W tym przykładzie wywoływany jest komponent, który będziemy tworzyć time. Zauważ, że możesz zadeklarować a templatew następującym pliku XML. Jednak tak naprawdę nie przyniesie to żadnego pożytku, ponieważ szablon XHTML zawinie szablon Knockout, który faktycznie renderuje. Istnieją inne węzły, które możesz zadeklarować tutaj, np. Sprawdzanie poprawności.

<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 Utwórz komponent interfejsu użytkownika

// 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'
        }
    });
});

Kilka uwag na temat powyższego Javascript:

elementTmplto nie jest konieczne. Jeśli jednak chcesz dostosować szablon (obecnie module-ui/view/base/web/templates/form/element/date.html), po prostu stwórz własny szablon i odwołaj się do niego elementTmpl.

Dostępnych jest więcej opcji. Możesz znaleźć więcej na ich temat: http://trentrichardson.com/examples/timepicker/#tp-options . W kodzie znajduje się lista wszystkich wartości domyślnych:/lib/web/jquery/jquery-ui-timepicker-addon.js

Wynik końcowy:

• W tym momencie nie wierzę, że można zadeklarować własny komponent interfejsu użytkownika w sposób podobny do tego definitions.xml. Można je jednak rozszerzyć przy minimalnym wysiłku. (I jeśli istnieje sposób, proszę dać mi znać).

Możesz po prostu użyć tego kodu XML do tego samego wyniku, jak powyżej:

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

Wynik: