Magento 2 Hiển thị đồng hồ bấm giờ bằng UiComponent

Tôi muốn hiển thị Timepicker trong Mẫu Thành phần Ui. Tôi có thể thêm trường thời gian bằng cách sử dụng mã bên dưới nhưng không thể lưu giá trị. Ai có thể giúp đỡ về nó.

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

Tôi không nhận được thời gian mà tôi đã chọn ui_form. Tôi đang nhận được ngày ở định dạng UTC theo mặc định trong Magento. Tôi muốn chỉ nhận được thời gian mà tôi đã chọn ui_form.

Bạn cần "tạo" Thành phần UI của riêng mình.

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

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ó sẽ không thực sự làm được điều 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 nó với elementTmpl.

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

Bạn có thể thử mã dưới đây.

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

Trong Bộ điều khiển của bạn, sử dụng chức năng strtotime .

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