Magento 2 Mostrar timepicker usando UiComponent e não Datepicker

Quero mostrar timepicker na minha forma UIComponent

Como o Magento Docs mostra as variações que eles fornecem ao timepicker:

Eu quero isso usando UiComponent no meu formulário.

Nota: É necessário mostrar o horário da programação para que não seja necessária uma data.

Referência verificada: Como adicionar o seletor de intervalo de tempo ao formulário adminhtml no Magento 2? (Mas está usando bloco, eu quero usar UiComponent)

Você precisa "criar" * seu próprio componente de interface do usuário. Você pode fazer isso estendendo o componente da interface do usuário da data.

# 1 Adicione o XML ao seu formulário

Adicione o campo ao fieldset. Neste exemplo, o componente que iremos criar é chamado time. Observe que você pode declarar um templateno XML a seguir. No entanto, ele não será realmente bom, pois é o modelo XHTML que envolve o modelo Knockout que faz a renderização real. Existem outros nós que você pode declarar aqui como validação.

<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 Crie o componente da interface do usuário

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

Algumas notas sobre o Javascript acima:

elementTmplnão é necessário. No entanto, se você deseja personalizar o modelo (atualmente module-ui/view/base/web/templates/form/element/date.html), basta criar seu próprio modelo e referenciá-lo elementTmpl.

Existem mais opções para a entrada. Você pode encontrar mais informações sobre eles: http://trentrichardson.com/examples/timepicker/#tp-options . No código, há uma lista de todos os padrões aqui:/lib/web/jquery/jquery-ui-timepicker-addon.js

Resultado final:

• Neste ponto, não acredito que seja possível declarar seu próprio componente de interface do usuário de maneira semelhante à de definitions.xml. No entanto, você pode estendê- los com o mínimo esforço. (E, se houver uma maneira, por favor me avise).

Você pode apenas usar esse código xml para o mesmo resultado acima:

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

Resultado: