Magento 2 Mostra timepicker utilizzando UiComponent

Voglio mostrare Timepicker in UI Component Form. Sono stato in grado di aggiungere il campo temporale utilizzando il codice seguente ma non in grado di salvare il valore. Qualcuno può aiutarci.

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

Non sto ricevendo quel tempo in cui ho selezionato ui_form. Sto ricevendo la data in formato UTC per impostazione predefinita in Magento. Voglio ottenere solo il tempo in cui ho selezionato ui_form.

Devi "creare" il tuo componente UI.

È possibile farlo estendendo il componente dell'interfaccia utente della data.

# 1 Aggiungi l'XML al tuo modulo

In questo esempio, viene chiamato il componente che creeremo time.

Nota che puoi dichiarare a templatenel seguente XML. Tuttavia, non farà davvero nulla di buono in quanto è il modello XHTML che avvolgerà il modello Knockout che esegue il rendering effettivo. Ci sono altri nodi che puoi dichiarare qui come validazione.

<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 Crea il componente 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'
        }
    });
});

Alcune note sul Javascript sopra:

elementTmplnon è necessario. Tuttavia, se si desidera personalizzare il modello (attualmente module-ui/view/base/web/templates/form/element/date.html), basta creare il proprio modello e fare riferimento a esso elementTmpl.

Rif: Magento 2 Mostra timepicker usando UiComponent non Datepicker

Puoi provare sotto il codice.

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

Nel tuo controller, usa la funzione strtotime .

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