Magento 2 - Cara menambahkan Komponen UI DateTime

Saya ingin menambahkan bidang baru sebagai datetime di bagian halaman CMS sambil menambahkan halaman baru, saya menemukan magento menggunakan Komponen UI untuk itu, jadi setelah menggali saya bisa menambahkan bidang tanggal dengan menggunakan kode di bawah ini tetapi tidak dapat menambahkan bidang datetime. Adakah yang bisa membantu?

Kode untuk menambahkan bidang tanggal:

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

File yang perlu kita timpa untuk mencapai:

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

Untuk menambahkan pemilih dateTime, Anda harus menggunakan arahan berikutnya di dalam file 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>

Yang penting adalah showsTimeopsi.

Hasilnya akan terlihat seperti ini:

Jika Anda ingin men-debug elemen UI - gunakan perintah ini di dalam konsol browser (di halaman Anda):

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

Ini mengembalikan dateelemen Anda dengan semua opsi awal dan semua fungsi yang mungkin:

Anda bisa menggunakannya saat mendefinisikan elemen (di dalam xml).

Sebagai info tambahan:

The date(juga dateTime) elemen dapat ditemukan di sini:

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

dalam file statis:

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

Kelas-elemen kelas (objek) memiliki metode prepareDateTimeFormats, di mana opsi penting showsTimediperiksa:

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

Saya harap jawaban ini memberikan beberapa gagasan tentang apa yang Anda lewatkan

Saya menambahkan komponen UI bidang waktu tanggal melalui php (berfungsi dengan baik)

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

dibandingkan dengan file xml Anda, semua nilai ada kecuali date_format dan time_format sehingga Anda dapat mencoba mengatur kedua nilai dalam file xml Anda

untuk lebih jelasnya silakan lihat kode sumber lengkap ini