Magento 2 - So fügen Sie die DateTime-UI-Komponente hinzu

18

Ich möchte beim Hinzufügen einer neuen Seite ein neues Feld als Datum / Uhrzeit in den CMS-Seitenabschnitt einfügen. Ich habe festgestellt, dass Magento die UI-Komponente für dieses Feld verwendet. Nach dem Durchsuchen konnte ich das Datumsfeld mit dem folgenden Code hinzufügen, aber kein Datum / Uhrzeit-Feld hinzufügen. Kann mir jemand weiterhelfen.

Code für das Feld zum Hinzufügen des Datums:

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

Datei, die wir überschreiben müssen, um Folgendes zu erreichen:

vendor/magento/module-cms/view/adminhtml/ui_component/cms_block_form.xml
MagentoDev
quelle
@sivakumar Ob meine Antwort dir geholfen hat?
Siarhey Uchukhlebau
Ja @SiarheyUchukhlebau, es hat sehr geholfen.
MagentoDev
Mögliches Duplikat von Magento 2 Timepicker mit UiComponent anzeigen
Teja Bhagavan Kollepara
@TejabhagavanKollepara Warum kennst du die vor 9 Monaten gestellte Frage als Duplikat der vor 4 Monaten gestellten Frage ?!
Siarhey Uchukhlebau

Antworten:

32

Um die DateTime-Auswahl hinzuzufügen, sollten Sie die nächste Direktive in der XML-Datei verwenden:

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

Wichtig ist die showsTimeOption.

Das Ergebnis sollte folgendermaßen aussehen:

Datum-Uhrzeit-UI-Element Ergebnis

Wenn Sie das Benutzeroberflächenelement debuggen möchten, verwenden Sie diesen Befehl in der Browserkonsole (auf Ihrer Seite):

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

Es gibt Ihr dateElement mit allen anfänglichen Optionen und allen möglichen Funktionen zurück:

UI-Elementobjekt

Sie können sie verwenden, wenn Sie das Element definieren (in XML).

Als zusätzliche Info:

Das date(auch dateTime) Element finden Sie hier:

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

in den statischen Dateien:

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

Die Datumselementklasse (Objekt) hat eine Methode prepareDateTimeFormats, bei der die wichtige Option showsTimemarkiert ist:

/**
 * 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 Uchukhlebau
quelle
Was ist, wenn ich nur die Zeitauswahl anzeigen möchte? @ Siarhey
Ronak Chauhan
@ RonakChauhan Sie benötigen ein anderes benutzerdefiniertes Element, da das DateTimeElement immer das Datum darstellt.
Siarhey Uchukhlebau
aber wie macht man das?
Ronak Chauhan
@ RonakChauhan Sie sollten das abstrakte UI-Element erweitern und so etwas wie.timepicker()
Siarhey Uchukhlebau
1
Finden Sie die Lösung von mir, Ihre Antwort ein hat falsches Zeitformat , müssen wir ändern , hh:mm:ssum HH:mm:ssin der Benutzeroberfläche Componet, sonst 03:00:00 PMwird wurde 03:00:00 AM, fehlen 12 Stunden und Sie können nicht speichern Sie die Zeit der Uhr in der Datenbanktabelle.
Key Shang
2

Ich hoffe, diese Antwort gibt eine Vorstellung davon, was Sie vermissen

Ich habe die UI-Komponente des Datum / Uhrzeit-Feldes über PHP hinzugefügt (es funktioniert einwandfrei)

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

einfach für Ihre Referenz

Im Vergleich zu Ihrer XML-Datei sind alle Werte außer Datumsformat und Zeitformat vorhanden, sodass Sie versuchen können, die beiden Werte in Ihrer XML-Datei festzulegen

Weitere Details finden Sie in diesem vollständigen Quellcode

Bilal Usean
quelle
Können Sie die Datei "vendor / magento / module-cms / view / adminhtml / ui_component / cms_block_form.xml" durchgehen und mir mitteilen, wie ich den obigen Code integrieren kann?
MagentoDev
Wie kann ich sourcemeinen benutzerdefinierten Namen ändern ? Welche Voraussetzungen gibt es hier?
Vasilii Burlacu