Magento 2 Datepicker가 아닌 UiComponent를 사용하여 시간 선택기 표시

내 UiComponent 양식에 시간 선택기 를 표시하고 싶습니다

Magento Docs는 시간 선택기를 제공하는 변형을 보여줍니다.

내 형태로 UiComponent를 사용하여 이것을 원합니다.

참고 : 일정 시간을 표시해야하므로 날짜가 필요하지 않습니다.

확인 된 참조 : Magento 2에서 시간 범위 선택기를 adminhtml 양식에 추가하는 방법은 무엇입니까? (그러나 사용 블록은 UiComponent를 사용하고 싶습니다)

자신의 UI 구성 요소를 "만들기"해야합니다. 날짜 UI 구성 요소를 확장하여이를 수행 할 수 있습니다.

# 1 폼에 XML 추가

필드를 필드 세트에 추가하십시오. 이 예에서는 만들 구성 요소를이라고 time합니다. template다음 XML에서를 선언 할 수 있습니다 . 그러나 실제 렌더링을 수행하는 녹아웃 템플릿을 래핑하는 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'
        }
    });
});

위 자바 스크립트에 대한 몇 가지 참고 사항 :

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>

결과: