Magento 2 Tampilkan timepicker menggunakan UiComponent

Saya ingin menunjukkan Timepicker dalam Formulir Komponen Ui. Saya dapat menambahkan bidang waktu dengan menggunakan kode di bawah ini tetapi tidak dapat menyimpan nilai. Adakah yang bisa membantu?

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

Saya tidak mendapatkan waktu yang telah saya pilih ui_form. Saya mendapatkan tanggal dalam format UTC secara default di Magento. Saya hanya ingin mendapatkan waktu yang telah saya pilih ui_form.

Anda perlu "membuat" Komponen UI Anda sendiri.

Anda dapat melakukan ini dengan memperluas Komponen UI Tanggal.

# 1 Tambahkan XML ke formulir Anda

Dalam contoh ini, komponen yang akan kita buat dipanggil time.

Perhatikan bahwa Anda dapat mendeklarasikan templatedalam XML berikut. Namun, itu tidak benar-benar ada gunanya karena itu adalah template XHTML yang akan membungkus template Knockout yang melakukan rendering yang sebenarnya. Ada node lain yang bisa Anda nyatakan di sini seperti validasi.

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

Beberapa catatan tentang Javascript di atas:

elementTmpltidak perlu. Namun, jika Anda ingin menyesuaikan template (saat ini module-ui/view/base/web/templates/form/element/date.html), buat saja template Anda sendiri dan rujuk dengan elementTmpl.

Ref: Magento 2 Tampilkan timepicker menggunakan UiComponent bukan Datepicker

Anda dapat mencoba kode di bawah ini.

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

Di Controller Anda, gunakan fungsi strtotime .

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