Magento 2-DateTime UIコンポーネントを追加する方法


18

新しいページを追加するときにCMSページセクションに日付フィールドとして新しいフィールドを追加したいので、UIコンポーネントを使用してmagentoを見つけたので、掘り下げた後、以下のコードを使用して日付フィールドを追加できましたが、日付フィールドを追加できませんでした。誰でもそれを助けることができます。

日付フィールドを追加するためのコード:

<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

@sivakumar私の答えがあなたを助けたかどうか?
Siarhey Uchukhlebau

はい@SiarheyUchukhlebau、それはたくさん助けました。
MagentoDev


@TejabhagavanKollepara 9か月前に出された質問を、4か月前に出された質問の複製としてマークするのはなぜですか?!
Siarhey Uchukhlebau

回答:


32

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要素の結果

UI要素をデバッグする場合-ブラウザコンソール内(ページ上)で次のコマンドを使用します。

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

dateすべての初期オプションとすべての可能な関数を含む要素を返します。

UI要素オブジェクト

要素を定義するときにそれらを使用できます(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

日付要素クラス(オブジェクト)にはmethod 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;
}

タイムピッカーのみを表示する場合はどうなりますか?@Siarhey
Ronak Chauhan

@RonakChauhan DateTime要素は常に日付をレンダリングするため、別のカスタム要素が必要です。
Siarhey Uchukhlebau

しかし、それを行う方法は?
ロナックチャウハン

あなたは抽象的UIエレメントおよび使用の何かのように拡張する必要があります@RonakChauhan.timepicker()
Siarhey Uchukhlebau

1
自分で解決策を見つけてください、あなたの答えは間違ったtimeFormatを持っています、私たちはUIコンポーネントで変更hh:mm:ssする必要がありますHH:mm:ss、そうでなければ03:00:00 PMなります03:00:00 AM、12時間不足し、データベーステーブルにPMの時間を保存することはできません
キーシャン

2

この回答があなたが見逃しているものについての考えを与えることを願っています

日付時刻フィールドのUIコンポーネントをphp経由で追加しました(正常に動作します)

$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_formattime_formatを除くすべての値が存在するため、xmlファイルで両方の値を設定することができます。

詳細については、この完全なソースコードを参照してください。


「vendor / magento / module-cms / view / adminhtml / ui_component / cms_block_form.xml」ファイルを参照して、上記のコードを統合する方法を教えてください。
MagentoDev

sourceカスタム名に変更するにはどうすればよいですか?ここにどんな要件がありますか?
ヴァシリーブララック
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.