Magento 2 - Как добавить компонент DateTime UI

18

Я хочу добавить новое поле как datetime в раздел страницы CMS при добавлении новой страницы. Я обнаружил, что magento использует для этого UI Component, поэтому после копания я смог добавить поле даты с помощью приведенного ниже кода, но не смог добавить поле datetime. Кто-нибудь может помочь в этом.

Код для добавления поля даты:

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

Файл, который мы должны переопределить для достижения:

vendor/magento/module-cms/view/adminhtml/ui_component/cms_block_form.xml
MagentoDev
источник
@sivakumar Помог ли тебе мой ответ?
Сергей Учухлебау
Да @SiarheyUchukhlebau, это помогло много.
MagentoDev
Возможный дубликат Magento 2 Show timepicker с использованием UiComponent
Teja Bhagavan Kollepara
@TejabhagavanKollepara Почему вы отмечаете вопрос, заданный 9 месяцев назад, как дубликат вопроса, заданного 4 месяца назад ?!
Сергей Учухлебау

Ответы:

32

Чтобы добавить средство выбора даты и времени, вы должны использовать следующую директиву внутри 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>

Важной вещью является showsTimeвозможность.

Результат должен выглядеть так:

результат элемента даты и времени

Если вы хотите отладить элемент пользовательского интерфейса - используйте эту команду в консоли браузера (на вашей странице):

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

Он возвращает ваш dateэлемент со всеми начальными опциями и всеми возможными функциями:

UI элемент объекта

Вы можете использовать их, когда определяете элемент (внутри xml).

Как дополнительная информация:

Элемент date(также dateTime) можно найти здесь:

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

в статических файлах:

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

У класса элемента даты (объекта) есть метод prepareDateTimeFormats, где showsTimeпроверяется важная опция :

/**
 * 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
Ронак Чаухан
@RonakChauhan Вам нужен еще один пользовательский элемент, потому что DateTimeэлемент всегда отображает дату.
Сергей Учухлебау
но как это сделать?
Ронак Чаухан
@RonakChauhan Вы должны расширить абстрактный UI-элемент и использовать что-то вроде.timepicker()
Сергей Учухлебау
1
Найдите решение самостоятельно, ваш ответ имеет неправильный формат времени , нам нужно изменить hh:mm:ssего HH:mm:ssв UI Component, иначе 03:00:00 PMстанет 03:00:00 AM12 часов, и вы не сможете сохранить время PM в таблице базы данных.
Ключ Шан
2

Я надеюсь, что этот ответ дает некоторое представление о том, что вы скучаете

Я добавил компонент пользовательского поля поля даты через php (он работает нормально)

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

легко для вашей справки

сравните с вашим XML-файлом все значения, кроме date_format и time_format, поэтому вы можете попытаться установить оба значения в своем XML-файле

для более подробной информации, пожалуйста, обратитесь к этому полному исходному коду

Билал Усеан
источник
Можете ли вы просмотреть файл "vendor / magento / module-cms / view / adminhtml / ui_component / cms_block_form.xml" и сообщить мне, как интегрировать приведенный выше код.
MagentoDev
Как я могу изменить sourceсвое собственное имя? Какие требования здесь?
Василий Бурлаку