Magento 2 - Come aggiungere il componente UI DateTime

Voglio aggiungere un nuovo campo come data / ora nella sezione della pagina CMS durante l'aggiunta di una nuova pagina, ho scoperto che Magento utilizzava il componente UI per esso, quindi dopo aver scavato sono stato in grado di aggiungere il campo data utilizzando il codice sottostante ma non è possibile aggiungere il campo Data / ora. Qualcuno può aiutarci.

Codice per aggiungere campo data:

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

File che dobbiamo sovrascrivere per raggiungere:

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

Per aggiungere il selettore dateTime è necessario utilizzare la direttiva successiva all'interno del file 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>

La cosa importante è l' showsTimeopzione.

Il risultato dovrebbe apparire così:

Se desideri eseguire il debug dell'elemento UI, utilizza questo comando nella console del browser (sulla tua pagina):

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

Restituisce il tuo dateelemento con tutte le opzioni iniziali e tutte le possibili funzioni:

Puoi usarli quando definisci l'elemento (all'interno di xml).

Come informazioni aggiuntive:

L' elemento date(anche dateTime) può essere trovato qui:

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

nei file statici:

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

La classe elemento-data (oggetto) ha metodo prepareDateTimeFormats, in cui showsTimeè selezionata l'opzione importante :

/**
 * 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;
}

Spero che questa risposta dia qualche idea su cosa ti manca

Ho aggiunto il componente UI del campo data e ora tramite php (funziona benissimo)

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

confronta con il tuo file xml tutti i valori sono presenti tranne date_format e time_format in modo da poter provare a impostare entrambi i valori nel tuo file xml

per maggiori dettagli si prega di fare riferimento a questo codice sorgente completo