Magento 2 Mostra timepicker utilizzando UiComponent non Datepicker

Voglio mostrare il segnatempo nel mio modulo UiComponent

Come Magento Docs mostra le varianti che forniscono il timer:

Voglio questo usando UiComponent nel mio modulo.

Nota: è necessario mostrare l'orario programmato, quindi non è necessaria la data.

Riferimento verificato: come aggiungere il selettore intervallo di tempo al modulo adminhtml in Magento 2? (Ma è usando il blocco, voglio usare UiComponent)

magento-2.1 uicomponent time

— Ronak Chauhan
fonte

hai controllato magento.stackexchange.com/questions/130985/… ?

— Vishwas Bhatnagar il

Sì, desidero solo il calendario Time not date.

— Ronak Chauhan,

Possibile duplicato di Magento 2 - Come aggiungere il componente UI DateTime

— Teja Bhagavan Kollepara,

Voglio solo l'ora, non l'ora della data, quindi non è una domanda duplicata @teja bhagavan Kollepara

— Chauhan

@TejabhagavanKollepara Per favore, leggi attentamente tutte le domande prima di contrassegnarle come controparti.

— Siarhey Uchukhlebau,

Risposte:

Devi "creare" * il tuo componente UI. È possibile farlo estendendo il componente dell'interfaccia utente della data.

# 1 Aggiungi l'XML al tuo modulo

Aggiungi il campo al fieldset. In questo esempio, viene chiamato il componente che creeremo time. Nota che puoi dichiarare a templatenel seguente XML. Tuttavia, non farà davvero nulla di buono in quanto è il modello XHTML che avvolgerà il modello Knockout che esegue il rendering effettivo. Ci sono altri nodi che puoi dichiarare qui come validazione.

<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 Crea il componente UI

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

Alcune note sul Javascript sopra:

elementTmplnon è necessario. Tuttavia, se si desidera personalizzare il modello (attualmente module-ui/view/base/web/templates/form/element/date.html), basta creare il proprio modello e fare riferimento a esso elementTmpl.

Ci sono più opzioni per l'input. Puoi trovare ulteriori informazioni su di loro: http://trentrichardson.com/examples/timepicker/#tp-options . Nel codice, c'è un elenco di tutte le impostazioni predefinite qui:/lib/web/jquery/jquery-ui-timepicker-addon.js

Risultato finale:

A questo punto, non credo sia possibile dichiarare il proprio componente UI in un modo simile a quello di definitions.xml. Tuttavia, puoi estenderli con il minimo sforzo. (E, se c'è un modo, per favore fatemi sapere).

— bassplayer7
fonte

@John, i componenti dell'interfaccia utente non esistono in Magento 1. Ma è Magento <= 2.1. Magento 2.2 ha introdotto alcune modifiche alle aspettative dello schema. Forse potrò aggiungere una nota a riguardo, ma se si determina lo schema Magento 2.2, si prega di pubblicare.

— bassplayer7,

Puoi semplicemente usare questo codice XML per lo stesso risultato di cui sopra:

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

Risultato:

— Sergey Uskov
fonte