Magento 2使用UiComponent而不是Datepicker显示时间选择器

我想以UiComponent形式显示时间选择器

正如Magento Docs显示的变化一样，它们提供了时间选择器：

我想要在我的表单中使用UiComponent。

注意：需要显示计划时间，所以不需要日期。

已检查参考：如何在Magento 2中将时间范围选择器添加到adminhtml表单？（但是它的using块，我想使用UiComponent）

您需要“创建” *您自己的UI组件。您可以通过扩展Date UI组件来做到这一点。

＃1将XML添加到表单

将字段添加到字段集。在此示例中，我们将要创建的组件称为time。请注意，您可以template在以下XML中声明a 。但是，它实际上并不会发挥任何作用，因为XHTML模板将包装完成实际渲染的Knockout模板。您可以在此处声明其他节点，例如验证。

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

结果：