Magento 2 Mostrar selector de tiempo usando UiComponent no Datepicker

Quiero mostrar el selector de tiempo en mi formulario UiComponent

A medida que Magento Docs muestra las variaciones, proporciona un selector de tiempo:

Quiero esto usando UiComponent en mi forma.

Nota: es necesario mostrar la hora programada para que no se necesite una fecha.

Referencia comprobada: ¿Cómo agregar un selector de rango de tiempo al formulario adminhtml en Magento 2? (Pero está usando el bloque, quiero usar UiComponent)

magento-2.1 uicomponent time

— Ronak Chauhan
fuente

¿has comprobado magento.stackexchange.com/questions/130985/… ?

— Vishwas Bhatnagar

sí, solo quiero calendario de tiempo, no fecha.

— Ronak Chauhan

Posible duplicado de Magento 2 - Cómo agregar el componente de la interfaz de usuario de DateTime

— Teja Bhagavan Kollepara

Solo quiero tiempo, no fecha, así que no es una pregunta duplicada @teja bhagavan Kollepara

— Ronak Chauhan

@TejabhagavanKollepara Por favor, lea atentamente todas las preguntas antes de marcarlas como contrapartes.

— Siarhey Uchukhlebau

Respuestas:

Necesita "crear" * su propio componente de interfaz de usuario. Puede hacerlo extendiendo el Componente de IU de fecha.

# 1 Agregue el XML a su formulario

Agregue el campo al conjunto de campos. En este ejemplo, se llama al componente que crearemos time. Tenga en cuenta que puede declarar un templateen el siguiente XML. Sin embargo, realmente no servirá de nada, ya que es la plantilla XHTML la que envolverá la plantilla Knockout que realiza el renderizado real. Hay otros nodos que puede declarar aquí como validación.

<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 Crear el componente de la interfaz de usuario

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

Algunas notas sobre el Javascript anterior:

elementTmplno es necesario. Sin embargo, si desea personalizar la plantilla (actualmente module-ui/view/base/web/templates/form/element/date.html), simplemente cree su propia plantilla y haga referencia a ella elementTmpl.

Hay más opciones para la entrada. Puede encontrar más información sobre ellos: http://trentrichardson.com/examples/timepicker/#tp-options . En el código, hay una lista de todos los valores predeterminados aquí:/lib/web/jquery/jquery-ui-timepicker-addon.js

Resultado final:

En este punto, no creo que sea posible declarar su propio Componente UI de una manera similar a la de definitions.xml. Sin embargo, puede extenderlos con un mínimo esfuerzo. (Y, si hay alguna manera, hágamelo saber).

— bassplayer7
fuente

@John, los componentes de la interfaz de usuario no existen en Magento 1. Pero es Magento <= 2.1. Magento 2.2 introdujo algunos cambios en las expectativas del esquema. Quizás pueda agregar una nota al respecto, pero si determina el esquema de Magento 2.2, publíquelo.

— bassplayer7

Puede usar este código xml para obtener el mismo resultado que el anterior:

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

— Sergey Uskov
fuente