Magento 2 Показать таймер с помощью UiComponent

Я хочу показать Timepicker в Ui Component Form. Я мог бы добавить поле времени , используя приведенный ниже код, но не смог сохранить значение. Кто-нибудь может помочь в этом.

   <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. Я получаю дату в формате UTC по умолчанию в Magento. Я хочу получить только то время, которое выбрал ui_form.

Вам необходимо «создать» свой собственный компонент пользовательского интерфейса.

Вы можете сделать это, расширив компонент Date UI.

# 1 Добавьте XML в вашу форму

В этом примере компонент, который мы будем создавать, называется time.

Обратите внимание, что вы можете объявить templateв следующем XML. Однако на самом деле это не принесет пользы, так как это шаблон 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 Создание компонента пользовательского интерфейса

// 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));
   ----------------
}