Magento 2 Показать средство выбора времени, используя UiComponent, а не средство Datepicker

Я хочу показать Timepicker в моей форме UiComponent

В Magento Docs показаны варианты, которые они предоставляют:

Я хочу это с помощью UiComponent в моей форме.

Примечание: нужно показывать расписание, поэтому дата не нужна.

Проверенная ссылка: Как добавить средство выбора временного диапазона в форму adminhtml в Magento 2? (Но это с помощью блока, я хочу использовать UiComponent)

magento-2.1 uicomponent time

— Ронак Чаухан
источник

Вы проверили magento.stackexchange.com/questions/130985/… ?

— Вишвас Бхатнагар

да, я хочу только время, а не дата календаря.

— Ронак Чаухан

Возможный дубликат Magento 2 - Как добавить компонент пользовательского интерфейса DateTime

— Teja Bhagavan Kollepara

Я хочу только время, а не дату, так что это не повторяющийся вопрос @teja bhagavan Kollepara

— Ronak Chauhan

@TejabhagavanKollepara Пожалуйста, внимательно прочитайте все вопросы, прежде чем отмечать их как коллег.

— Сергей Учухлебау

Ответы:

Вам нужно «создать» * свой собственный компонент пользовательского интерфейса. Вы можете сделать это, расширив компонент Date UI.

# 1 Добавьте XML в вашу форму

Добавьте поле в набор полей. В этом примере компонент, который мы будем создавать, называется time. Обратите внимание, что вы можете объявить templateв следующем XML. Однако на самом деле это не принесет пользы, так как это шаблон XHTML, который обернет шаблон Knockout, который выполняет фактический рендеринг. Есть и другие узлы, которые вы можете объявить здесь как валидация.

<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 Создание компонента пользовательского интерфейса

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

Конечный результат:

На данный момент, я не верю, что можно объявить свой собственный компонент пользовательского интерфейса способом, аналогичным тому, который используется в definitions.xml. Однако вы можете расширить их с минимальными усилиями. (И, если есть способ, пожалуйста, дайте мне знать).

— bassplayer7
источник

@John, компоненты пользовательского интерфейса не существуют в Magento 1. Но это Magento <= 2.1. В Magento 2.2 внесены некоторые изменения в схему ожиданий. Возможно, я смогу добавить примечание об этом, но если вы определите схему Magento 2.2, пожалуйста, напишите.

— bassplayer7

Вы можете просто использовать этот код 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>

Результат:

— Сергей Усков
источник