Magento 2: cómo agregar el componente de la interfaz de usuario de DateTime

Quiero agregar un nuevo campo como fecha y hora en la sección de la página CMS al agregar una nueva página, encontré que magento usaba el componente UI para ello, por lo que después de excavar pude agregar el campo de fecha usando el código a continuación pero no pude agregar el campo de fecha y hora. ¿Alguien puede ayudar en eso?

Código para agregar campo de fecha:

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

Archivo que debemos anular para lograr:

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

Para agregar el selector dateTime, debe usar la siguiente directiva dentro del archivo 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>

Lo importante es la showsTimeopción.

El resultado debería verse así:

Si desea depurar el elemento de la interfaz de usuario, use este comando dentro de la consola del navegador (en su página):

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

Devuelve su dateelemento con todas las opciones iniciales y todas las funciones posibles:

Puede usarlos cuando defina el elemento (dentro de xml).

Como información adicional:

El elemento date(también dateTime) se puede encontrar aquí:

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

en los archivos estáticos:

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

La clase de elemento de fecha (objeto) tiene un método prepareDateTimeFormats, donde se marca la opción importante 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;
}

Espero que esta respuesta dé una idea de lo que extrañas

Agregué el componente UI del campo de fecha y hora a través de php (funciona bien)

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

compare con su archivo xml todos los valores están presentes excepto date_format y time_format para que pueda intentar establecer ambos valores en su archivo xml

Para más detalles, consulte este código fuente completo