Magento 2 แสดง Timepicker โดยใช้ UiComponent ไม่ใช่ Datepicker

ฉันต้องการแสดงtimepickerในรูปแบบ UiComponent ของฉัน

ในขณะที่ Magento Docs แสดงการเปลี่ยนแปลงที่พวกเขาให้ Timepicker:

ฉันต้องการสิ่งนี้โดยใช้ UiComponent ในแบบฟอร์มของฉัน

หมายเหตุ: จำเป็นต้องแสดงตารางเวลาดังนั้นไม่จำเป็นต้องใช้วันที่

ข้อมูลอ้างอิงที่ตรวจสอบแล้ว: วิธีเพิ่มตัวเลือกช่วงเวลาให้กับฟอร์ม adminhtml ใน Magento 2 ได้อย่างไร (แต่ใช้บล็อคฉันต้องการใช้ UiComponent)

คุณต้อง "สร้าง" * องค์ประกอบ UI ของคุณเอง คุณสามารถทำได้โดยขยาย Date UI Component

# 1 เพิ่ม XML ในแบบฟอร์มของคุณ

เพิ่มเขตข้อมูลลงใน fieldset timeในตัวอย่างนี้องค์ประกอบที่เราจะสร้างจะเรียกว่า โปรดทราบว่าคุณสามารถประกาศ a templateใน XML ต่อไปนี้ อย่างไรก็ตามมันจะไม่ทำอะไรที่ดีเพราะเป็นเทมเพลต XHTML ที่จะตัดเทมเพลตสิ่งที่น่าพิศวงที่แสดงผลออกมาตามจริง มีโหนดอื่น ๆ ที่คุณสามารถประกาศได้ที่นี่เช่นการตรวจสอบ

<field name="time_field">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Time</item>
            <item name="dataType" xsi:type="string">text</item>
            <item name="formElement" xsi:type="string">date</item>
            <item name="dataScope" xsi:type="string">time_field</item>
            <item name="component" xsi:type="string">Your_Module/js/form/element/time</item>
        </item>
    </argument>
</field>

# 2 สร้างองค์ประกอบ UI

// app/code/Your/Module/view/adminhtml/web/js/form/element/time.js

define([
    'Magento_Ui/js/form/element/date'
], function(Date) {
    'use strict';

    return Date.extend({
        defaults: {
            options: {
                showsDate: false,
                showsTime: true,
                timeOnly: true
            },

            elementTmpl: 'ui/form/element/date'
        }
    });
});

หมายเหตุเล็กน้อยใน Javascript ข้างต้น:

elementTmplไม่จำเป็น. แต่ถ้าคุณต้องการปรับแต่งแม่แบบ (ปัจจุบันmodule-ui/view/base/web/templates/form/element/date.html) elementTmplเพียงแค่สร้างแม่แบบของคุณเองและอ้างอิงกับ

มีตัวเลือกเพิ่มเติมสำหรับอินพุต ท่านสามารถหาข้อมูลเพิ่มเติมเกี่ยวกับพวกเขา: http://trentrichardson.com/examples/timepicker/#tp-options ในรหัสมีรายการค่าเริ่มต้นทั้งหมดที่นี่:/lib/web/jquery/jquery-ui-timepicker-addon.js

ผลลัพธ์สุดท้าย:

• ณ จุดนี้ผมไม่เชื่อว่ามันเป็นไปได้ที่จะประกาศของคุณตัวแทน UI definitions.xmlเองในลักษณะที่คล้ายกันกับที่ของ อย่างไรก็ตามคุณสามารถขยายได้โดยใช้ความพยายามเพียงเล็กน้อย (และหากมีวิธีโปรดแจ้งให้เราทราบ)

คุณสามารถใช้รหัส xml นี้สำหรับผลลัพธ์เดียวกันกับด้านบน:

<field name="opening_time">
    <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">Opening time</item>
            <item name="formElement" xsi:type="string">date</item>
            <item name="source" xsi:type="string">page</item>
            <item name="sortOrder" xsi:type="number">70</item>
            <item name="dataScope" xsi:type="string">opening_time</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 name="timeOnly" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

ผลลัพธ์: