Magento 2-如何添加DateTime UI组件

我想在添加新页面时在CMS页面部分中添加新字段作为日期时间，我发现magento使用UI组件，因此在挖掘之后，我可以通过使用以下代码来添加日期字段，但无法添加日期时间字段。有人可以帮忙吗？

添加日期字段的代码：

<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

要添加dateTime选择器，您应该在xml文件中使用next指令：

<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选项。

结果应如下所示：

如果要调试UI元素-在浏览器控制台内（在页面上）使用此命令：

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

它返回date具有所有初始选项和所有可能功能的元素：

定义元素（在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

date-element类（对象）具有method 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;
}

我希望这个答案可以让您对您想念的事情有所了解

我通过php添加了日期时间字段的UI组件（工作正常）

$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文件中设置这两个值

有关更多详细信息，请参考此完整源代码