마 젠토 2-DateTime UI 구성 요소를 추가하는 방법

새 페이지를 추가하는 동안 CMS 페이지 섹션에서 새 필드를 날짜 시간으로 추가하고 싶습니다 .magento가 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

dateTime 선택기를 추가하려면 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;
}

이 답변이 당신이 놓친 것에 대한 아이디어를 제공하기를 바랍니다.

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 파일에서 두 값을 모두 설정하십시오.

자세한 내용은이 전체 소스 코드 를 참조하십시오