Magento 2 - Jak dodać składnik UI DateTime

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

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:

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:

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

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'
        ]
);

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