Magento 2 - डेटाइम UI घटक कैसे जोड़ें

Question

मैं नए पृष्ठ को जोड़ते हुए CMS पृष्ठ अनुभाग में डेटाटाइम के रूप में नया फ़ील्ड जोड़ना चाहता हूं, मैंने पाया कि इसके लिए UI घटक का उपयोग करने वाला मैगनेटो, इसलिए खुदाई के बाद मैं नीचे दिए गए कोड का उपयोग करके दिनांक फ़ील्ड को जोड़ने में सक्षम हो सकता हूं लेकिन डेटाटाइम फ़ील्ड को जोड़ने में सक्षम नहीं हूं। क्या कोई इस पर मदद कर सकता है।

जोड़ने की तारीख फ़ील्ड के लिए कोड:

<field name="start_date">
    <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">Go Live Start Date</item>
            <item name="formElement" xsi:type="string">date</item>
            <item name="source" xsi:type="string">page</item>
            <item name="sortOrder" xsi:type="number">21</item>
            <item name="dataScope" xsi:type="string">start_date</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

हमें प्राप्त करने के लिए ओवरराइड करने वाली फ़ाइल:

vendor/magento/module-cms/view/adminhtml/ui_component/cms_block_form.xml

Comments

@ शिवकुमार क्या मेरे जवाब से आपको मदद मिली?

— सराही उचुकलेबौ

हाँ @SiarheyUchukhlebau, यह बहुत मदद की।

— MagentoDev

Magento के

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

@TejabhagavanKollepara आप 9 महीने पहले पूछे गए प्रश्न को चिह्नित क्यों करते हैं क्योंकि 4 महीने पहले पूछे गए प्रश्न के डुप्लिकेट?

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

Answer 1

डेटटाइम पिकर जोड़ने के लिए आपको xml फ़ाइल के अंदर अगले निर्देश का उपयोग करना चाहिए:

<field name="start_date">
    <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">Go Live Start Date</item>
            <item name="formElement" xsi:type="string">date</item>
            <item name="source" xsi:type="string">page</item>
            <item name="sortOrder" xsi:type="number">21</item>
            <item name="dataScope" xsi:type="string">start_date</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>
        </item>
    </argument>
</field>

महत्वपूर्ण बात showsTimeविकल्प है।

परिणाम इस तरह दिखना चाहिए:

यदि आप UI तत्व को डीबग करना चाहते हैं - ब्राउज़र कंसोल के अंदर इस कमांड का उपयोग करें (अपने पेज पर):

require('uiRegistry').get('index = start_date')

यह आपके dateतत्व को सभी प्रारंभिक विकल्पों और सभी संभावित कार्यों के साथ लौटाता है :

जब आप तत्व को परिभाषित करते हैं (xml के अंदर) तो आप उनका उपयोग कर सकते हैं।

अतिरिक्त जानकारी के रूप में:

date(यह भी dateTime) तत्व यहां पाया जा सकता है:

app/code/Magento/Ui/view/base/web/js/form/element/date.js

स्थिर फ़ाइलों में:

pub/static/adminhtml/Magento/backend/en_US/Magento_Ui/js/form/element/date.js

दिनांक-तत्व वर्ग (ऑब्जेक्ट) में विधि है prepareDateTimeFormats, जहां महत्वपूर्ण विकल्प showsTimeकी जांच की जाती है:

/**
 * Prepares and converts all date/time formats to be compatible
 * with moment.js library.
 */
prepareDateTimeFormats: function () {
    this.pickerDateTimeFormat = this.options.dateFormat;

    if (this.options.showsTime) {
        this.pickerDateTimeFormat += ' ' + this.options.timeFormat;
    }

    this.pickerDateTimeFormat = utils.normalizeDate(this.pickerDateTimeFormat);

    if (this.dateFormat) {
        this.inputDateFormat = this.dateFormat;
    }

    this.inputDateFormat = utils.normalizeDate(this.inputDateFormat);
    this.outputDateFormat = utils.normalizeDate(this.outputDateFormat);

    this.validationParams.dateFormat = this.outputDateFormat;
}

Comments

क्या होगा अगर मैं केवल टाइम पिकर दिखाना चाहता हूं? @ सियारी

— रौनक चौहान

@RonakChauhan आपको एक और कस्टम तत्व की आवश्यकता है क्योंकि DateTimeतत्व हमेशा तारीख प्रदान करता है।

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

लेकिन ऐसा कैसे करें?

— रौनक चौहान

@ रोनकचौहान आपको सार यूआई-तत्व का विस्तार करना चाहिए और कुछ का उपयोग करना चाहिए.timepicker()

— Siarhey Uchukhlebau

अपने आप से समाधान खोजने, आपका जवाब एक है गलत timeFormat , हम बदल की जरूरत hh:mm:ssके लिए HH:mm:ss, यूआई Componet में अन्यथा 03:00:00 PMबन जाएगा 03:00:00 AM, 12 घंटे की कमी है और आप कर सकते हैं प्रधानमंत्री के समय नहीं बचा डेटाबेस तालिका में।

— कुंजी शांग

Answer 2

मुझे आशा है कि यह उत्तर आपको याद करने के बारे में कुछ विचार देता है

मैंने php के माध्यम से दिनांक समय फ़ील्ड का UI घटक जोड़ा (यह ठीक काम करता है)

$fieldset->addField(
        'event_date',
        'date',
        [
            'name' => 'event_date',
            'label' => __('Date'),
            'title' => __('Date'),
            'required' => true,
            'date_format' => 'yyyy-MM-dd',
            'time_format' => 'hh:mm:ss'
        ]
);

अपनी xml फ़ाइल की तुलना में date_format और time_format को छोड़कर सभी मान मौजूद हैं, इसलिए आप अपनी xml फ़ाइल में दोनों मान सेट करने का प्रयास कर सकते हैं

अधिक जानकारी के लिए कृपया इस पूर्ण स्रोत कोड को देखें

Comments

क्या आप "वेंडर / मैगनेटो / मॉड्यूल-सेमी / व्यू / एडमिनबुक / ui_component / cms_block_form.xml" फाइल से गुजर सकते हैं और मुझे बता सकते हैं कि मैं उपरोक्त कोड को कैसे एकीकृत कर सकता हूं।

— MagentoDev

मैं sourceअपने कस्टम नाम में कैसे बदल सकता हूँ ? यहां क्या आवश्यकताएं हैं?

— वासिली बर्लाकु