Magento 2 - วิธีเพิ่มส่วนประกอบ UI DateTime


18

ฉันต้องการเพิ่มเขตข้อมูลใหม่เป็นวันที่และเวลาในส่วนหน้า CMS ในขณะที่เพิ่มหน้าใหม่ฉันพบว่า magento ใช้ UI Component สำหรับมันดังนั้นหลังจากขุดฉันสามารถเพิ่มเขตข้อมูลวันที่โดยใช้รหัสด้านล่าง แต่ไม่สามารถเพิ่มเขตข้อมูลวันที่ ใครช่วยได้บ้าง

รหัสสำหรับฟิลด์เพิ่มวันที่:

<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

@sivakumar คำตอบของฉันช่วยคุณได้ไหม?
Siarhey Uchukhlebau

ใช่ @ SiarheyUchukhlebau มันช่วยได้มาก
MagentoDev


@TejabhagavanKollepara ทำไมคุณทำเครื่องหมายคำถามที่ถาม 9 เดือนที่ผ่านมาเป็นคำถามซ้ำที่ถามเมื่อ 4 เดือนที่แล้ว!
Siarhey Uchukhlebau

คำตอบ:


32

ในการเพิ่มตัวเลือก DateTime คุณควรใช้คำสั่งถัดไปในไฟล์ 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ตัวเลือก

ผลลัพธ์ควรมีลักษณะเช่นนี้:

ผลองค์ประกอบ UI วันที่และเวลา

หากคุณต้องการที่จะแก้ปัญหาองค์ประกอบ UI - ใช้คำสั่งนี้ภายในคอนโซลเบราว์เซอร์ (บนหน้าของคุณ):

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

@RonakChauhan คุณต้องการองค์ประกอบที่กำหนดเองอื่นเพราะDateTimeองค์ประกอบทำให้วันที่เสมอ
Siarhey Uchukhlebau

แต่จะทำอย่างไร
Ronak Chauhan

@RonakChauhan คุณควรขยายองค์ประกอบ UI ที่เป็นนามธรรมและใช้บางอย่างเช่น.timepicker()
Siarhey Uchukhlebau

1
ค้นหาโซลูชันด้วยตัวเองคำตอบของคุณมีเวลาผิดรูปแบบเราต้องเปลี่ยนhh:mm:ssไปHH:mm:ssใน UI Componet มิฉะนั้น03:00:00 PMจะกลายเป็น03:00:00 AMขาด 12 ชั่วโมงและคุณไม่สามารถประหยัดเวลาของ PMในตารางฐานข้อมูล
Key Shang

2

ฉันหวังว่าคำตอบนี้ให้ความคิดบางอย่างเกี่ยวกับสิ่งที่คุณคิดถึง

ฉันเพิ่มองค์ประกอบ UI ของเขตเวลาวันที่ผ่าน 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 ของคุณ

สำหรับรายละเอียดเพิ่มเติมโปรดดูรหัสที่มาแบบเต็ม


คุณช่วยให้ผ่าน "ผู้จำหน่าย / magento / module-cms / view / adminhtml / ui_component / cms_block_form.xml" ไฟล์และแจ้งให้เราทราบว่าฉันจะรวมรหัสข้างต้นได้อย่างไร
MagentoDev

ฉันsourceจะเปลี่ยนเป็นชื่อที่กำหนดเองได้อย่างไร ข้อกำหนดอะไรบ้างที่นี่
Vasilii Burlacu
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.