Magento 2 Zeige Timepicker mit UiComponent

Ich möchte Timepicker in Ui-Komponentenform anzeigen . Ich konnte die Lage , die hinzuzufügen Zeit , indem Sie unter Code - Feld , aber nicht in der Lage Wert zu speichern. Kann mir jemand helfen.

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

Ich bekomme nicht die Zeit, die ich ausgewählt habe ui_form. Ich erhalte das Datum standardmäßig im UTC-Format in Magento. Ich möchte nur die Zeit erhalten, in der ich ausgewählt habe ui_form.

Sie müssen Ihre eigene UI-Komponente "erstellen".

Sie können dies tun, indem Sie die Datums-UI-Komponente erweitern.

# 1 Fügen Sie das XML zu Ihrem Formular hinzu

In diesem Beispiel wird die Komponente aufgerufen, die wir erstellen werden time.

Beachten Sie, dass Sie templateim folgenden XML ein deklarieren können. Es wird jedoch nicht wirklich gut tun, da es die XHTML-Vorlage ist, die die Knockout-Vorlage umschließt, die das eigentliche Rendern ausführt. Es gibt andere Knoten, die Sie hier als Validierung deklarieren können.

<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 Erstellen Sie die UI-Komponente

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

Einige Anmerkungen zum obigen Javascript:

elementTmplist nicht nötig. Wenn Sie die Vorlage jedoch (derzeit module-ui/view/base/web/templates/form/element/date.html) anpassen möchten , erstellen Sie einfach Ihre eigene Vorlage und verweisen Sie darauf elementTmpl.

Ref: Magento 2 Zeige Timepicker mit UiComponent, nicht Datepicker

Sie können den folgenden Code ausprobieren.

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

Verwenden Sie in Ihrem Controller die Funktion strtotime .

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