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

14

Chcę pokazać timepicker w mojej formie UiComponent

Gdy Magento Docs pokazują odmiany, które zapewniają timepicker: wprowadź opis zdjęcia tutaj

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)

Ronak Chauhan
źródło
sprawdziłeś magento.stackexchange.com/questions/130985/... ?
Vishwas Bhatnagar,
tak, chcę tylko kalendarz z datą i czasem.
Ronak Chauhan
Możliwy duplikat Magento 2 - Jak dodać komponent interfejsu użytkownika DateTime
Teja Bhagavan Kollepara
2
Chcę tylko czasu, a nie daty, więc nie jest to duplikat pytania @teja bhagavan Kollepara
Ronak Chauhan
@TejabhagavanKollepara Proszę uważnie przeczytać wszystkie pytania przed oznaczeniem ich jako odpowiedników.
Siarhey Uchukhlebau

Odpowiedzi:

9

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:

składnik czasu


  • 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ć).
bassplayer7
źródło
1
@John, komponenty interfejsu użytkownika nie istnieją w Magento 1. Ale to Magento <= 2.1. Magento 2.2 wprowadził pewne zmiany do oczekiwań schematu. Być może będę mógł dodać notatkę na ten temat, ale jeśli określisz schemat Magento 2.2, wyślij wiadomość.
bassplayer7
2

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: wprowadź opis zdjęcia tutaj

Siergiej Uskov
źródło