Magento 2 UiComponentを使用してタイムピッカーを表示する

私が見せたいTimepickerを UIコンポーネントのフォームで。以下のコードを使用して時間フィールドを追加できましたが、値を保存できませんでした。誰でも手伝ってくれる？

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

で選択した時間を取得できませんui_form。MagentoではデフォルトでUTC形式の日付を取得しています。で選択した時間だけを取得したいui_form。

独自のUIコンポーネントを「作成」する必要があります。

これを行うには、日付UIコンポーネントを拡張します。

＃1 XMLをフォームに追加する

この例では、作成するコンポーネントはと呼ばれtimeます。

template次のXMLでを宣言できることに注意してください。ただし、実際のレンダリングを行うのはKnockoutテンプレートをラップするのはXHTMLテンプレートであるため、実際には何の効果もありません。検証のように、ここで宣言できる他のノードがあります。

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

上記のJavascriptに関する注意事項：

elementTmpl必要ありません。ただし、テンプレート（現在はmodule-ui/view/base/web/templates/form/element/date.html）をカスタマイズする場合は、独自のテンプレートを作成してで参照しelementTmplます。

参照：Magento 2はDatepickerではなくUiComponentを使用してtimepickerを表示します

以下のコードを試すことができます。

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

コントローラで、strtotime関数を使用します。

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