Magento 2 Daepicker değil UiComponent kullanarak zamanlayıcıyı göster

Göstermek istediğim timepicker benim UIComponent formda

Magento Docs, zamanlayıcı sağladıkları varyasyonları gösterdiğinden:

Bu formumda UiComponent kullanarak istiyorum.

Not: Herhangi bir tarih gerekmemesi için program saatini göstermeniz gerekir.

İşaretli referans: Magento 2'de adminhtml formuna zaman aralığı seçici nasıl eklenir? (Ama onun blok kullanarak, UiComponent kullanmak istiyorum)

magento-2.1 uicomponent time

— Ronak Chauhan
kaynak

magento.stackexchange.com/questions/130985/… adresini kontrol ettiniz mi?

— Vishwas Bhatnagar

evet, sadece tarih değil takvim istiyorum.

— Ronak Chauhan

Magento 2'nin

— Teja Bhagavan Kollepara

Ben sadece zaman değil tarihi zaman istiyorum yani onun yinelenen soru @teja bhagavan Kollepara

— Ronak Chauhan

@TejabhagavanKollepara Lütfen, tüm soruları muadil olarak işaretlemeden önce dikkatlice okuyun.

— Siarhey Uchukhlebau

Yanıtlar:

Kendi UI Bileşeninizi "oluşturmanız" * gerekir. Bunu, Tarih Kullanıcı Arabirimi Bileşeni'ni genişleterek yapabilirsiniz.

# 1 XML'i formunuza ekleyin

Alanı alan kümesine ekleyin. Bu örnekte, oluşturacağımız bileşen çağrılmaktadır time. templateAşağıdaki XML'de bir bildirimde bulunabileceğinizi unutmayın . Ancak, gerçek oluşturmayı yapan Nakavt şablonunu saran XHTML şablonu olduğu için gerçekten iyi olmaz. Burada doğrulama gibi bildirebileceğiniz başka düğümler var.

<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 Bileşenini Oluşturma

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

Yukarıdaki Javascript hakkında birkaç not:

elementTmplgerekli değil. Ancak, şablonu (şu anda module-ui/view/base/web/templates/form/element/date.html) özelleştirmek istiyorsanız , kendi şablonunuzu oluşturun ve ona referans verin elementTmpl.

Giriş için daha fazla seçenek var. Bunlar hakkında daha fazla bilgi bulabilirsiniz: http://trentrichardson.com/examples/timepicker/#tp-options . Kodda, burada tüm varsayılanların bir listesi vardır:/lib/web/jquery/jquery-ui-timepicker-addon.js

Sonuç:

Bu noktada, kendi UI Bileşeninizi buna benzer bir şekilde beyan etmenin mümkün olduğuna inanmıyorum definitions.xml. Ancak, bunları minimum çaba ile genişletebilirsiniz . (Ve bir yolu varsa, lütfen bana bildirin).

— bassplayer7
kaynak

@John, UI Bileşenleri Magento 1'de mevcut değildir. Ancak Magento <= 2.1'dir. Magento 2.2, şema beklentilerinde bazı değişiklikler yaptı. Belki bununla ilgili bir not ekleyebilirim, ancak Magento 2.2 şemasını belirlerseniz, lütfen gönderin.

— bassplayer7

Bu xml kodunu yukarıdakiyle aynı sonuç için kullanabilirsiniz:

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

Sonuç:

— Sergey Uskov
kaynak