Magento 2 DatepickerではなくUiComponentを使用してタイムピッカーを表示する

UiComponentフォームにタイムピッカーを表示したい

Magento Docsがバリエーションを示すように、それらはタイムピッカーを提供します：

フォームでUiComponentを使用してこれが必要です。

注：スケジュール時間を表示する必要があるため、日付は不要です。

チェック済みリファレンス：Magento 2のadminhtmlフォームに時間範囲ピッカーを追加する方法 （しかし、そのusingブロック、UiComponentを使用したい）

独自のUIコンポーネントを「作成」*する必要があります。これを行うには、Date UIコンポーネントを拡張します。

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

フィールドセットにフィールドを追加します。この例では、作成するコンポーネントはと呼ばれtimeます。template次のXMLでa を宣言できることに注意してください。ただし、実際のレンダリングを行う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ます。

入力にはさらにオプションがあります。それらの詳細については、http：//trentrichardson.com/examples/timepicker/#tp-optionsを参照してください。コードには、すべてのデフォルトのリストがあります。/lib/web/jquery/jquery-ui-timepicker-addon.js

最終結果：

• この時点では、と同様の方法で独自のUIコンポーネントを宣言することは不可能だと思いますdefinitions.xml。ただし、最小限の労力で拡張できます。（そして、方法があれば、教えてください）。

上記と同じ結果を得るために、このxmlコードを使用できます。

<field name="opening_time">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">string</item>
            <item name="label" xsi:type="string" translate="true">Opening time</item>
            <item name="formElement" xsi:type="string">date</item>
            <item name="source" xsi:type="string">page</item>
            <item name="sortOrder" xsi:type="number">70</item>
            <item name="dataScope" xsi:type="string">opening_time</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
            <item name="options" xsi:type="array">
                <item name="dateFormat" xsi:type="string">yyyy-MM-dd</item>
                <item name="timeFormat" xsi:type="string">HH:mm:ss</item>
                <item name="showsTime" xsi:type="boolean">true</item>
                <item name="timeOnly" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

結果：