ম্যাজেন্টো 2 ইউকোম্পোন্ট ব্যবহার করে ডেটপিকার ব্যবহার করে টাইমপিকার দেখান

Question

আমি দেখাতে চাই timepicker আমার UiComponent আকারে

ম্যাজেন্টো ডক্স যেমন টাইম পিকার সরবরাহ করে তার বিভিন্নতা দেখায়:

আমি আমার ফর্মটিতে এটি ইউআইকম্পোন্টেট ব্যবহার করে চাই।

দ্রষ্টব্য: সময়সূচির সময় দেখাতে হবে তাই কোনও তারিখের প্রয়োজন নেই।

পরীক্ষিত রেফারেন্স: ম্যাজেন্টো 2-তে অ্যাডমিনটিচটিএমএল ফর্মটিতে টাইম রেঞ্জ পিকারটি কীভাবে যুক্ত করবেন? (তবে এটির ব্লকটি ব্যবহার করে, আমি ইউআইকম্পোনেন্ট ব্যবহার করতে চাই)

Comments

আপনি কি ম্যাজেন্টো.স্ট্যাকেক্সেঞ্জার.কম / সেকশনস / ১১৩০85৮৫/২ পরীক্ষা করেছেন ?

— বিশ্বাস ভাটনগর

হ্যাঁ, আমি কেবলমাত্র সময় চাই ক্যালেন্ডার নয়।

— রোনক চৌহান

ম্যাজেন্টো 2

— ডেটটাইম

আমি কেবল সময় তারিখের সময় চাই তাই এর সদৃশ প্রশ্ন নয় @teja ভাগবনের কোলেপাড়া

— রোনাক চৌহান

@ তেজাবাগাভানকোলেপাড়া দয়া করে, সমস্ত প্রশ্নগুলি প্রতিপক্ষ হিসাবে চিহ্নিত করার আগে মনোযোগ দিয়ে পড়ুন।

— সিয়ারে উখখলেবাউ

Answer 1

আপনার নিজের ইউআই উপাদানটি "তৈরি" করতে হবে। আপনি তারিখের UI উপাদানটি বাড়িয়ে এটি করতে পারেন।

# 1 আপনার ফর্মটিতে এক্সএমএল যুক্ত করুন

ফিল্ডসেটে ক্ষেত্রটি যুক্ত করুন। এই উদাহরণে, আমরা যে উপাদানটি তৈরি করব তা বলা হয় time। নোট করুন যে আপনি templateনিম্নলিখিত এক্সএমএলে একটি ঘোষণা করতে পারেন । তবে এটি সত্যই কোনও ভাল করতে পারে না কারণ এটি এক্সএইচটিএমএল টেমপ্লেট যা নকআউট টেমপ্লেটটি আসল রেন্ডারিং করে w অন্যান্য নোড রয়েছে যা আপনি বৈধতার মতো এখানে ঘোষণা করতে পারেন।

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

উপরের জাভাস্ক্রিপ্টে কয়েকটি নোট:

elementTmplপ্রয়োজন হয় না. তবে, আপনি যদি টেমপ্লেটটি (বর্তমানে module-ui/view/base/web/templates/form/element/date.html) কাস্টমাইজ করতে চান তবে কেবল নিজের টেম্পলেট তৈরি করুন এবং এর সাথে এটি উল্লেখ করুন elementTmpl।

ইনপুট জন্য আরও বিকল্প আছে। আপনি তাদের সম্পর্কে আরও জানতে পারেন: http://trentrichardson.com/example/timepicker/#tp-options । কোডটিতে, এখানে সমস্ত ডিফল্টের একটি তালিকা রয়েছে:/lib/web/jquery/jquery-ui-timepicker-addon.js

শেষ ফলাফল:

---

• এই মুহুর্তে, আমি বিশ্বাস করি না যে এটির মতো অনুরূপভাবে আপনার নিজের ইউআই উপাদানটি ঘোষণা করা সম্ভব definitions.xml। তবে, আপনি তাদের সর্বনিম্ন প্রচেষ্টা দিয়ে প্রসারিত করতে পারেন । (এবং যদি কোনও উপায় থাকে তবে দয়া করে আমাকে জানান)

Comments

@ জন, ইউআই উপাদানগুলি ম্যাজেন্টো 1 তে বিদ্যমান নেই তবে এটি ম্যাগেন্টো <= 2.1। ম্যাজেন্টো ২.২ স্কিমা প্রত্যাশায় কিছু পরিবর্তন আনল। সম্ভবত আমি সে সম্পর্কিত একটি নোট যুক্ত করতে সক্ষম হব, তবে আপনি যদি ম্যাজেন্টো ২.২ স্কিমিটি নির্ধারণ করেন তবে দয়া করে পোস্ট করুন।

— bassplayer7

Answer 2

আপনি কেবল উপরের মত একই ফলাফলের জন্য এই এক্সএমএল কোডটি ব্যবহার করতে পারেন:

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

ফলাফল: