Magento 2 Покажіть підбирач часу за допомогою UiComponent not Datepicker

Я хочу показати позначку часу у своїй формі UiComponent

Як показують варіанти Magento Docs, вони забезпечують вибір часу:

Я хочу, щоб це використовувало UiComponent у своїй формі.

Примітка. Потрібно вказати час розкладу, тому дата не потрібна.

Перевірена посилання: Як додати інструмент вибору часового діапазону до форми адміністратора в Magento 2? (Але його використання блоку, я хочу використовувати UiComponent)

magento-2.1 uicomponent time

— Ронак Чаухан
джерело

ви перевірили magento.stackexchange.com/questions/130985/… ?

— Vishwas Bhatnagar

так, я хочу лише календар часу, а не час.

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

Можливий дублікат Magento 2 - Як додати компонент інтерфейсу DateTime

— Teja Bhagavan Kollepara

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

— Ronak Chauhan

@TejabhagavanKollepara Будь ласка, уважно прочитайте всі питання, перш ніж позначити їх як аналогів.

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

Відповіді:

Вам потрібно "створити" * свій власний компонент інтерфейсу. Це можна зробити, розширивши компонент інтерфейсу дати.

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

Результат:

— Сергій Усков
джерело