Magento 2 - Comment ajouter le composant d'interface utilisateur DateTime

Je veux ajouter un nouveau champ en tant que date / heure dans la section de la page CMS lors de l'ajout d'une nouvelle page, j'ai trouvé que magento utilisant le composant d'interface utilisateur pour lui, donc après avoir creusé, je pouvais ajouter le champ de date en utilisant le code ci-dessous mais pas en mesure d'ajouter le champ de date / heure. Quelqu'un peut-il m'aider?

Code pour ajouter un champ de date:

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

Fichier que nous devons remplacer pour atteindre:

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

Pour ajouter le sélecteur dateTime, vous devez utiliser la directive suivante dans le fichier 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 chose importante est l' showsTimeoption.

Le résultat devrait ressembler à ceci:

Si vous souhaitez déboguer l'élément UI - utilisez cette commande dans la console du navigateur (sur votre page):

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

Il renvoie votre dateélément avec toutes les options initiales et toutes les fonctions possibles:

Vous pouvez les utiliser lorsque vous définissez l'élément (à l'intérieur du xml).

Comme info supplémentaire:

L' élément date(aussi dateTime) peut être trouvé ici:

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

dans les fichiers statiques:

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

La classe élément-date (objet) a une méthode prepareDateTimeFormats, où l'option importante showsTimeest vérifiée:

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

J'espère que cette réponse donne une idée de ce qui vous manque

J'ai ajouté le composant UI du champ date-heure via php (cela fonctionne 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'
        ]
);

comparer à votre fichier xml toutes les valeurs sont présentes sauf date_format et time_format afin que vous puissiez essayer de définir les deux valeurs dans votre fichier xml

pour plus de détails, veuillez vous référer à ce code source complet