Magento 2 UpComponent नहीं Datepicker का उपयोग करके टाइमपिकर दिखाएं

Question

मैं दिखाना चाहता हूँ timepicker मेरी UIComponent रूप में

मैगेंटो डॉक्स के रूप में वे विविधताएं दिखाते हैं जो वे टाइमपिकर प्रदान करते हैं:

मैं अपने रूप में UiComponent का उपयोग करना चाहता हूं।

नोट: शेड्यूल समय दिखाने की आवश्यकता है इसलिए किसी तिथि की आवश्यकता नहीं है।

चेक किया गया संदर्भ: Magento 2 में adminhtml फॉर्म में समय सीमा पिकर कैसे जोड़ें? (लेकिन इसका उपयोग ब्लॉक, मैं UiComponent का उपयोग करना चाहते हैं)

Comments

क्या आपने magento.stackexchange.com/questions/130985/… चेक किया है ?

— विश्वास भटनागर

हां, मैं केवल कैलेंडर नहीं समय चाहता हूं।

— रौनक चौहान

Magento 2 के

— तेजा भगवान कोलावेरा

मैं केवल इतना समय नहीं चाहता हूं ताकि इसका डुप्लिकेट प्रश्न न बने। @teja bhagavan Kollepara

— रौनक चौहान

@TejabhagavanKollepara कृपया, समकक्षों के रूप में चिह्नित करने से पहले सभी प्रश्नों को ध्यान से पढ़ें।

— सियारि उचुकलेबौ

Answer 1

आपको अपने स्वयं के UI घटक "बनाने" की आवश्यकता है। आप दिनांक UI घटक का विस्तार करके ऐसा कर सकते हैं।

# 1 XML को अपने फॉर्म में जोड़ें

फ़ील्ड को फ़ील्डसेट में जोड़ें। इस उदाहरण में, हम जो घटक बना रहे हैं, उसे कहा जाता है time। ध्यान दें कि आप templateनिम्नलिखित XML में घोषणा कर सकते हैं । हालाँकि, यह वास्तव में कोई अच्छा काम नहीं करेगा क्योंकि यह एक्सएचटीएमएल टेम्प्लेट है जो नॉकआउट टेम्पलेट को लपेटेगा जो वास्तविक रेंडरिंग करता है। ऐसे अन्य नोड्स हैं जिन्हें आप सत्यापन की तरह यहां घोषित कर सकते हैं।

<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 घटक बनाएँ

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

उपरोक्त जावास्क्रिप्ट पर कुछ नोट:

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। हालांकि, आप उन्हें न्यूनतम प्रयास के साथ बढ़ा सकते हैं । (और, अगर कोई रास्ता है, तो कृपया मुझे बताएं)।

Comments

@ जॉन, यूआई घटक मैगनेटो 1 में मौजूद नहीं हैं। लेकिन यह मैगेंटो <= 2.1 है। Magento 2.2 ने स्कीमा अपेक्षाओं में कुछ बदलाव किए। शायद मैं इसके बारे में एक नोट जोड़ पाऊंगा, लेकिन अगर आप Magento 2.2 स्कीमा का निर्धारण करते हैं, तो कृपया पोस्ट करें।

— बासप्लेर

Answer 2

आप इस 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>

परिणाम: