Magento 2 - Cara menambahkan Komponen UI DateTime


18

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

@sivakumar Apakah jawaban saya membantu Anda?
Siarhey Uchukhlebau

Ya @SiarheyUchukhlebau, itu banyak membantu.
MagentoDev


@TejabhagavanKollepara Mengapa Anda menandai pertanyaan yang diajukan 9 bulan lalu sebagai duplikat dari pertanyaan yang diajukan 4 bulan lalu ?!
Siarhey Uchukhlebau

Jawaban:


32

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:

tanggal-waktu hasil elemen ui

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:

Objek elemen UI

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

Bagaimana jika saya hanya ingin menunjukkan pemilih waktu? @Siarhey
Ronak Chauhan

@RonakChauhan Anda memerlukan elemen khusus lain karena DateTimeelemen selalu membuat tanggal.
Siarhey Uchukhlebau

tetapi bagaimana melakukannya?
Ronak Chauhan

@RonakChauhan Anda harus memperluas elemen UI-abstrak dan menggunakan sesuatu seperti.timepicker()
Siarhey Uchukhlebau

1
Temukan solusinya sendiri, jawaban Anda memiliki timeFormat yang salah , kami perlu mengubahnya hh:mm:sske HH:mm:ssdalam Komponen UI, jika tidak 03:00:00 PMakan menjadi 03:00:00 AM, kurang 12 jam dan Anda tidak dapat menghemat waktu PM dalam tabel database.
Kunci Shang

2

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

mudah untuk referensi Anda

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


Bisakah Anda melihat file "vendor / magento / module-cms / view / adminhtml / ui_component / cms_block_form.xml" dan beri tahu saya cara mengintegrasikan kode di atas.
MagentoDev

Bagaimana saya bisa mengubah sourcenama kustom saya? Persyaratan apa di sini?
Vasilii Burlacu
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.