Magento 2 Tampilkan timepicker menggunakan UiComponent bukan Datepicker

Saya ingin menunjukkan timepicker dalam bentuk UiComponent saya

Saat Magento Documents memperlihatkan variasi yang mereka berikan, timepicker:

Saya ingin ini menggunakan UiComponent di formulir saya.

Catatan: Perlu menunjukkan waktu jadwal sehingga tidak perlu tanggal.

Referensi yang diperiksa: Bagaimana cara menambahkan pemilih rentang waktu ke formulir adminhtml di Magento 2? (Tapi itu menggunakan blok, saya ingin menggunakan UiComponent)

magento-2.1 uicomponent time Ronak Chauhan
sumber

Sudahkah Anda memeriksa magento.stackexchange.com/questions/130985/… ?

Vishwas Bhatnagar

ya, saya hanya ingin Kalender waktu bukan tanggal.

Ronak Chauhan

Kemungkinan duplikat Magento 2 - Bagaimana cara menambahkan Komponen UI DateTime

Teja Bhagavan Kollepara

Saya hanya ingin waktu tidak berkencan sehingga tidak duplikat pertanyaan @teja bhagavan Kollepara

Ronak Chauhan

@TejabhagavanKollepara Tolong, baca dengan seksama semua pertanyaan sebelum menandainya sebagai mitra.

Siarhey Uchukhlebau

Jawaban:

Anda perlu "membuat" * Komponen UI Anda sendiri. Anda dapat melakukan ini dengan memperluas Komponen UI Tanggal.

# 1 Tambahkan XML ke formulir Anda

Tambahkan bidang ke bidang pengaturan. Dalam contoh ini, komponen yang akan kita buat dipanggil time. Perhatikan bahwa Anda dapat mendeklarasikan templatedalam XML berikut. Namun, itu tidak benar-benar ada gunanya karena itu adalah template XHTML yang akan membungkus template Knockout yang melakukan rendering yang sebenarnya. Ada node lain yang bisa Anda nyatakan di sini seperti validasi.

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

Beberapa catatan tentang Javascript di atas:

elementTmpltidak perlu. Namun, jika Anda ingin menyesuaikan template (saat ini module-ui/view/base/web/templates/form/element/date.html), buat saja template Anda sendiri dan rujuk dengan elementTmpl.

Ada lebih banyak opsi untuk input. Anda dapat menemukan lebih banyak tentang mereka: http://trentrichardson.com/examples/timepicker/#tp-options . Dalam kode, ada daftar semua default di sini:/lib/web/jquery/jquery-ui-timepicker-addon.js

Hasil akhir:

Pada titik ini, saya tidak percaya adalah mungkin untuk mendeklarasikan Komponen UI Anda sendiri dengan cara yang mirip dengan itu definitions.xml. Namun, Anda dapat memperpanjangnya dengan sedikit usaha. (Dan, jika ada jalan, tolong beri tahu saya).

bassplayer7
sumber

@ John, Komponen UI tidak ada di Magento 1. Tapi itu Magento <= 2.1. Magento 2.2 memperkenalkan beberapa perubahan pada ekspektasi skema. Mungkin saya akan dapat menambahkan catatan tentang itu, tetapi jika Anda menentukan skema Magento 2.2, silakan posting.

bassplayer7

Anda bisa menggunakan kode xml ini untuk hasil yang sama seperti di atas:

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

Hasil:

Sergey Uskov
sumber