Magento 2 Tampilkan timepicker menggunakan UiComponent bukan Datepicker


14

Saya ingin menunjukkan timepicker dalam bentuk UiComponent saya

Saat Magento Documents memperlihatkan variasi yang mereka berikan, timepicker: masukkan deskripsi gambar di sini

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)



ya, saya hanya ingin Kalender waktu bukan tanggal.
Ronak Chauhan


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


9

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:

komponen waktu


  • 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).

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

2

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: masukkan deskripsi gambar di sini

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.