Magento 2 Mostrar selector de tiempo usando UiComponent no Datepicker

14

Quiero mostrar el selector de tiempo en mi formulario UiComponent

A medida que Magento Docs muestra las variaciones, proporciona un selector de tiempo: ingrese la descripción de la imagen aquí

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)

Ronak Chauhan
fuente
¿has comprobado magento.stackexchange.com/questions/130985/… ?
Vishwas Bhatnagar
sí, solo quiero calendario de tiempo, no fecha.
Ronak Chauhan
2
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:

9

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:

componente de tiempo


  • 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
1
@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
2

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: ingrese la descripción de la imagen aquí

Sergey Uskov
fuente