Magento 2 - Cách thêm Thành phần UI DateTime

Tôi muốn thêm trường mới dưới dạng datetime trong phần trang CMS trong khi thêm trang mới, tôi thấy magento đó sử dụng Thành phần UI cho nó, vì vậy sau khi đào tôi có thể thêm trường ngày bằng cách sử dụng mã bên dưới nhưng không thể thêm trường datetime. Ai có thể giúp đỡ về nó.

Mã cho trường thêm ngày:

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

Tập tin chúng ta cần ghi đè để đạt được:

vendor/magento/module-cms/view/adminhtml/ui_component/cms_block_form.xml

Để thêm trình chọn dateTime, bạn nên sử dụng lệnh tiếp theo bên trong tệp 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>

Điều quan trọng là showsTimetùy chọn.

Kết quả sẽ như thế này:

Nếu bạn muốn gỡ lỗi phần tử UI - hãy sử dụng lệnh này trong bảng điều khiển trình duyệt (trên trang của bạn):

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

Nó trả về datephần tử của bạn với tất cả các tùy chọn ban đầu và tất cả các chức năng có thể:

Bạn có thể sử dụng chúng khi bạn xác định thành phần (bên trong xml).

Như thông tin bổ sung:

Phần tử date(cũng dateTime) có thể được tìm thấy ở đây:

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

trong các tệp tĩnh:

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

Lớp phần tử ngày (đối tượng) có phương thức prepareDateTimeFormats, trong đó tùy chọn quan trọng được chọn 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;
}

Tôi hy vọng câu trả lời này cho một số ý tưởng về những gì bạn bỏ lỡ

Tôi đã thêm thành phần UI của trường thời gian ngày thông qua php (nó hoạt động tốt)

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

so sánh với tệp xml của bạn, tất cả các giá trị đều có mặt ngoại trừ date_format và time_format để bạn có thể thử đặt cả hai giá trị trong tệp xml của mình

để biết thêm chi tiết xin vui lòng tham khảo mã nguồn đầy đủ này