Magento 2 Hiển thị đồng hồ bấm giờ bằng UiComponent chứ không phải Datepicker

Tôi muốn thể hiện timepicker ở dạng UIComponent của tôi

Vì Magento Docs hiển thị các biến thể họ cung cấp đồng hồ bấm giờ:

Tôi muốn điều này bằng cách sử dụng UiComponent trong mẫu của tôi.

Lưu ý: Cần hiển thị thời gian biểu để không cần ngày.

Đã tham khảo kiểm tra: Làm cách nào để thêm công cụ chọn phạm vi thời gian vào mẫu adminhtml trong Magento 2? (Nhưng nó sử dụng khối, tôi muốn sử dụng UiComponent)

Bạn cần "tạo" * Thành phần UI của riêng bạn. Bạn có thể làm điều này bằng cách mở rộng Thành phần UI ngày.

# 1 Thêm XML vào biểu mẫu của bạn

Thêm trường vào bộ trường. Trong ví dụ này, thành phần mà chúng ta sẽ tạo được gọi time. Lưu ý rằng bạn có thể khai báo a templatetrong XML sau. Tuy nhiên, nó thực sự sẽ không làm được gì vì đây là mẫu XHTML sẽ bao bọc mẫu Knockout thực hiện kết xuất thực tế. Có các nút khác bạn có thể khai báo ở đây như xác nhận.

<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 Tạo thành phần 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'
        }
    });
});

Một vài lưu ý về Javascript trên:

elementTmplkhông cần thiết. Tuy nhiên, nếu bạn muốn tùy chỉnh mẫu (hiện tại module-ui/view/base/web/templates/form/element/date.html), chỉ cần tạo mẫu của riêng bạn và tham khảo mẫu đó elementTmpl.

Có nhiều lựa chọn hơn cho đầu vào. Bạn có thể tìm hiểu thêm về chúng: http://trentrichardson.com/examples/timepicker/#tp-options . Trong mã, có một danh sách tất cả các mặc định ở đây:/lib/web/jquery/jquery-ui-timepicker-addon.js

Kết quả cuối cùng:

• Tại thời điểm này, tôi không tin rằng có thể khai báo Thành phần UI của riêng bạn theo cách tương tự như vậy definitions.xml. Tuy nhiên, bạn có thể mở rộng chúng với nỗ lực tối thiểu. (Và, nếu có một cách, xin vui lòng cho tôi biết).

Bạn chỉ có thể sử dụng mã xml này cho kết quả tương tự như trên:

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

Kết quả: