Magento 2 Show timepicker using UiComponent

Je veux montrer Timepicker sous forme de composant Ui. J'ai pu ajouter le champ de temps en utilisant le code ci-dessous mais je n'ai pas pu enregistrer de valeur. Quelqu'un peut-il m'aider?

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

Je ne reçois pas ce temps que j'ai sélectionné ui_form. Je reçois la date au format UTC par défaut dans Magento. Je veux obtenir uniquement le temps que j'ai sélectionné ui_form.

Vous devez "créer" votre propre composant d'interface utilisateur.

Vous pouvez le faire en étendant le composant d'interface utilisateur Date.

# 1 Ajoutez le XML à votre formulaire

Dans cet exemple, le composant que nous allons créer est appelé time.

Notez que vous pouvez déclarer un templatedans le XML suivant. Cependant, cela ne fera vraiment aucun bien car c'est le modèle XHTML qui encapsulera le modèle Knockout qui fait le rendu réel. Il existe d'autres nœuds que vous pouvez déclarer ici comme la validation.

<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 Créez le composant 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'
        }
    });
});

Quelques notes sur le Javascript ci-dessus:

elementTmpln'est pas nécessaire. Cependant, si vous souhaitez personnaliser le modèle (actuellement module-ui/view/base/web/templates/form/element/date.html), créez simplement votre propre modèle et référencez-le avec elementTmpl.

Ref: Magento 2 Afficher le timepicker en utilisant UiComponent et non Datepicker

Vous pouvez essayer ci-dessous le code.

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

Dans votre Controller, utilisez la fonction strtotime .

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