Magento 2 - Jak dodać składnik UI DateTime

18

Chcę dodać nowe pole jako datę / godzinę w sekcji strony CMS podczas dodawania nowej strony, zauważyłem, że magento używa do tego UI Component, więc po kopaniu mogłem dodać pole daty, używając poniższego kodu, ale nie mogłem dodać pola daty / godziny. Czy ktoś może w tym pomóc.

Kod pola daty dodania:

<field name="start_date">
    <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">Go Live Start Date</item>
            <item name="formElement" xsi:type="string">date</item>
            <item name="source" xsi:type="string">page</item>
            <item name="sortOrder" xsi:type="number">21</item>
            <item name="dataScope" xsi:type="string">start_date</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

Plik, który musimy przesłonić, aby osiągnąć:

vendor/magento/module-cms/view/adminhtml/ui_component/cms_block_form.xml
MagentoDev
źródło
@sivakumar Czy moja odpowiedź ci pomogła?
Siarhey Uchukhlebau
Tak @SiarheyUchukhlebau, To pomogło bardzo.
MagentoDev
Możliwy duplikat Magento 2 Pokaż timepicker przy użyciu UiComponent
Teja Bhagavan Kollepara
@TejabhagavanKollepara Dlaczego zaznaczasz pytanie zadane 9 miesięcy temu jako duplikat pytania zadanego 4 miesiące temu ?!
Siarhey Uchukhlebau

Odpowiedzi:

32

Aby dodać selektor dateTime, należy użyć następnej dyrektywy w pliku xml:

<field name="start_date">
    <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">Go Live Start Date</item>
            <item name="formElement" xsi:type="string">date</item>
            <item name="source" xsi:type="string">page</item>
            <item name="sortOrder" xsi:type="number">21</item>
            <item name="dataScope" xsi:type="string">start_date</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>
        </item>
    </argument>
</field>

Ważną rzeczą jest showsTimeopcja.

Wynik powinien wyglądać następująco:

wynik elementu interfejsu daty i godziny

Jeśli chcesz debugować element interfejsu użytkownika - użyj tego polecenia w konsoli przeglądarki (na swojej stronie):

require('uiRegistry').get('index = start_date')

Zwraca dateelement ze wszystkimi początkowymi opcjami i wszystkimi możliwymi funkcjami:

Obiekt elementu interfejsu użytkownika

Możesz ich użyć podczas definiowania elementu (wewnątrz xml).

Jako dodatkowe informacje:

Element date(również dateTime) można znaleźć tutaj:

app/code/Magento/Ui/view/base/web/js/form/element/date.js

w plikach statycznych:

pub/static/adminhtml/Magento/backend/en_US/Magento_Ui/js/form/element/date.js

Klasa (obiekt) date-element ma metodę prepareDateTimeFormats, w której showsTimesprawdzana jest ważna opcja :

/**
 * Prepares and converts all date/time formats to be compatible
 * with moment.js library.
 */
prepareDateTimeFormats: function () {
    this.pickerDateTimeFormat = this.options.dateFormat;

    if (this.options.showsTime) {
        this.pickerDateTimeFormat += ' ' + this.options.timeFormat;
    }

    this.pickerDateTimeFormat = utils.normalizeDate(this.pickerDateTimeFormat);

    if (this.dateFormat) {
        this.inputDateFormat = this.dateFormat;
    }

    this.inputDateFormat = utils.normalizeDate(this.inputDateFormat);
    this.outputDateFormat = utils.normalizeDate(this.outputDateFormat);

    this.validationParams.dateFormat = this.outputDateFormat;
}
Siarhey Uchukhlebau
źródło
Co się stanie, jeśli chcę wyświetlić tylko selektor czasu? @Siarhey
Ronak Chauhan
@RonakChauhan Potrzebujesz innego elementu niestandardowego, ponieważ DateTimezawsze wyświetla datę.
Siarhey Uchukhlebau,
ale jak to zrobić?
Ronak Chauhan
@RonakChauhan Powinieneś rozszerzyć abstrakcyjny element interfejsu użytkownika i użyć czegoś w stylu.timepicker()
Siarhey Uchukhlebau
1
Znajdź rozwiązanie przeze mnie, odpowiedź ma TimeFormat źle , potrzebujemy zmienić hh:mm:sssię HH:mm:ssw UI CompoNet, w przeciwnym razie 03:00:00 PMbędzie stała 03:00:00 AM, brak 12 godzin i nie można zapisać czas PM w tabeli bazy danych.
Key Shang
2

Mam nadzieję, że ta odpowiedź daje pewne wyobrażenie o tym, czego brakuje

Dodałem składnik UI pola daty i godziny przez php (działa dobrze)

$fieldset->addField(
        'event_date',
        'date',
        [
            'name' => 'event_date',
            'label' => __('Date'),
            'title' => __('Date'),
            'required' => true,
            'date_format' => 'yyyy-MM-dd',
            'time_format' => 'hh:mm:ss'
        ]
);

łatwe w celach informacyjnych

porównaj z plikiem xml wszystkie wartości są obecne z wyjątkiem date_format i time_format, więc możesz spróbować ustawić obie wartości w pliku xml

Aby uzyskać więcej informacji, zapoznaj się z pełnym kodem źródłowym

Bilal Usean
źródło
Czy możesz przejść do pliku „vendor / magento / module-cms / view / adminhtml / ui_component / cms_block_form.xml” i dać mi znać, jak mogę zintegrować powyższy kod.
MagentoDev,
Jak mogę zmienić sourceswoją niestandardową nazwę? Jakie są tutaj wymagania?
Vasilii Burlacu,