Magento 2使用UiComponent显示时间选择器

我想以Ui组件形式显示Timepicker。我可以使用下面的代码添加时间字段，但无法保存价值。有人可以帮忙吗？

   <field name="start_time">
        <argument name="data" xsi:type="array">                
            <item name="config" xsi:type="array">                    
                <item name="dataType" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Start Time</item>
                <item name="formElement" xsi:type="string">date</item>
                <item name="source" xsi:type="string">prmrule</item>
                <item name="dataScope" xsi:type="string">start_time</item>                    
                <item name="options" xsi:type="array">                             
                    <item name="controlType" xsi:type="string">select</item>
                    <item name="timeOnlyTitle" xsi:type="string">Select Start Time</item>                        
                    <item name="showsTime" xsi:type="boolean">true</item>                        
                    <item name="timeOnly" xsi:type="boolean">true</item>                                               
                </item>                    
            </item>
        </argument>
    </field>

我没有得到选择的时间ui_form。我在Magento中默认以UTC格式获取日期。我只想获得在中选择的时间ui_form。

您需要“创建”自己的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。

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

您可以尝试以下代码。

<field name="start_time">
    <argument name="data" xsi:type="array">                
        <item name="config" xsi:type="array">                    
            <item name="dataType" xsi:type="string">text</item>
           <item name="label" xsi:type="string" translate="true">Start Time</item>
           <item name="formElement" xsi:type="string">date</item>
           <item name="source" xsi:type="string">prmrule</item>
           <item name="dataScope" xsi:type="string">start_time</item>                                                
           <item name="options" xsi:type="array">                             
               <item name="controlType" xsi:type="string">select</item>
               <item name="timeOnlyTitle" xsi:type="string">Select Start Time</item>                        
               <item name="showsTime" xsi:type="boolean">true</item>                        
               <item name="timeOnly" xsi:type="boolean">true</item>                                               
               <item name="dateFormat" xsi:type="string">yyyy-MM-dd</item>
               <item name="timeFormat" xsi:type="string">h:mm a</item>            
           </item>                    
        </item>
    </argument>
</field>

在您的控制器中，使用strtotime函数。

public function execute()
{
   ----------------
   $data = $this->getRequest()->getPostValue();
   $dateTime = $data['start_time'];
   $start_time = date("H:i:s", strtotime($dateTime));
   ----------------
}